Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Interactivity within code cells - revealing hidden answers #5591

Open
psychemedia opened this issue Apr 11, 2014 · 7 comments

Comments

Projects
None yet
3 participants
@psychemedia
Copy link

commented Apr 11, 2014

Hi
In the v1.0 notebooks I was exploring the use of simple js activated by a button to toggle the display of a block of HTML, implementing a question and answer "reveal" mechanic that's common in education.

Examples of the interaction style I used can be found here: http://blog.ouseful.info/2014/04/11/losing-experimental-edtech-value-from-ipython-notebooks-because-of-new-security-policies/ (apologies about the tone of the piece..)

Are there currently any ways of supporting this sort of interaction?

If not, I'm happy to chat through ideas about how we might usefully get this sort of feature enabled and then contribute where I can.

@juhasch

This comment has been minimized.

Copy link
Contributor

commented Apr 12, 2014

From #5532:
You can add this line to your custom.js file:

IPython.security.sanitize_html = function (html) { return html; };
@psychemedia

This comment has been minimized.

Copy link
Author

commented Apr 13, 2014

@juhasch Thanks.. I'm absolutely at the limit of my skills trying to build a virtual machine to run these notebooks. So in the VM provisioning script, do I now need to work out where the ipython profile is in the VM, create some directory paths and a custom.js file, populate the custom.js file appropriately, and then... it should work?
Is there documentation anywhere about locating/defining custom.js files?

@juhasch

This comment has been minimized.

Copy link
Contributor

commented Apr 14, 2014

You can locate the default profile using ipython locate profile. There should be a default static/custom/custom.js file.
For documentation look here: http://ipython.org/ipython-doc/stable/config/intro.html#profiles

@psychemedia

This comment has been minimized.

Copy link
Author

commented Jun 5, 2014

@juhasch What creates the .ipython/profile_default/static/custom/custom.js ? If I change that file, eg running something like:

#Really should autodetect the path using ipython locate profile
Exec{
    'ipynb_customjs':
    command => '!sed -i "$a IPython.security.sanitize_html = function (html) { return html;} " /root/.ipython/profile_default/static/custom/custom.js';
  }

from my vagrant/puppet provisioner, I need to ensure that the file exists before I try to modify it.

@juhasch

This comment has been minimized.

Copy link
Contributor

commented Jun 7, 2014

@psychemedia This is in the documentation:
ipython profile create default creates the default profile.
However, it would be much better if you would use an extension like this
https://github.com/ipython-contrib/IPython-notebook-extensions/tree/master/usability/hide_input
instead of disabling security.

@psychemedia

This comment has been minimized.

Copy link
Author

commented Jun 8, 2014

@juhasch So to recap: what I want is the ability for a user to click a button and have an answer revealed. My original solution was a simple <script>ed javascript button to implement this but IPython Notebook update broke that in update. Quick fix was suggestion to nullify the security.sanitize_html method. New suggestion is to create presumably a hide/reveal extension based on other examples such as hide_input (is there a human readable description of what that extension does anywhere?)

Apols for being so slow, this is just one of multiple implementation jigsaw pieces I am trying to juggle at the moment and all of them are distractions from what I should be doing (which is writing teaching content that will use these features)!;-)

@juhasch

This comment has been minimized.

Copy link
Contributor

commented Jun 8, 2014

I understand this, it is just not solution for the future.
Can't you just use something like this (I don't claim this to be perfect):

File answer_button.js: https://gist.github.com/juhasch/2332190e19eb6276bed3

In your custom.js file add:

$([IPython.events]).on('app_initialized.NotebookApp', function(){
  require(['custom/answer_buttons'])
});

And in your HTML in markdown, just add class="answer"

<div class="answer" id="ans2" style="display: none">
I can see several ways of generating common identifiers:
...

Whenever you load or reload your notebook (or press the toolbar button created by the extension), this will generate your answer buttons.

@ellisonbg ellisonbg added the notebook label Jan 12, 2015

@ellisonbg ellisonbg added this to the wishlist milestone Jan 12, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.