jupman-tests.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "nbsphinx": "hidden"
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style>\n",
       "\n",
       "    #jupman-nav {\n",
       "        position: fixed;\n",
       "        top: 10px; \n",
       "        left: 5px; \n",
       "        background: white;\n",
       "        width: 200px; \n",
       "        padding: 10px; \n",
       "        z-index: 10;\n",
       "    }\n",
       "\n",
       "    /* style=\"background: rgba(255, 255, 255, 0);\" class=\"unstyled\" */\n",
       "  \n",
       "    #jupman-toc {\n",
       "        position: fixed;\n",
       "        top: 100px; \n",
       "        left: -55px; \n",
       "        background: rgba(255, 255, 255, 0);\n",
       "        \n",
       "        height: 80%;\n",
       "        width: 200px; \n",
       "        padding: 20px; \n",
       "        z-index: 10;\n",
       "        overflow-y: scroll;        \n",
       "            /* font-size: 50%; */\n",
       "    }\n",
       "\n",
       "    \n",
       "    \n",
       "    code {\n",
       "        background-color:rgb(245, 249, 249) !important;\n",
       "    }\n",
       "    \n",
       "    \n",
       "    .jupman-nav-item {\n",
       "        font-weight:bold;\n",
       "        font-size:120%  \n",
       "    }\n",
       "    \n",
       "    .jupman-chapter-link {\n",
       "        font-size:150%;\n",
       "        margin-right:15px;        \n",
       "    }\n",
       "    \n",
       "    .jupman-chapter-link a {\n",
       "        text-decoration: none;\n",
       "    }    \n",
       "    \n",
       "    .jupman-title {\n",
       "        font-size:250%; \n",
       "        font-weight:bold        \n",
       "    }    \n",
       "        \n",
       "    .jupman-warn {    \n",
       "        background-color: #fcf2f2;        \n",
       "        border-left: 5px solid #dfb5b4;\n",
       "        padding: 1.5em;\n",
       "        font-weight:bold;\n",
       "        margin-bottom:10px;\n",
       "    }\n",
       "\n",
       "    .jupman-question {    \n",
       "        background-color: rgb(251, 231, 250);\n",
       "        border-left: 5px solid rgb(189, 151, 184);\n",
       "        padding: 1.5em;\n",
       "        font-weight:bold;\n",
       "        margin-bottom:10px;\n",
       "    }\n",
       "        \n",
       "    \n",
       "    .jupman-important {\n",
       "        background-color: rgba(255, 238, 0, 0.31);\n",
       "        border-left: 5px solid rgba(205, 208, 0, 1.0);\n",
       "        color: #000;        \n",
       "        padding: 1.5em;\n",
       "        font-weight:bold;\n",
       "        margin-bottom:10px;\n",
       "    }\n",
       "    \n",
       "    \n",
       "    #jupman-toc ul {                                                                                                                                                                           \n",
       "        list-style-type: none;                                                                                                                                                                 \n",
       "        margin-left: 5px;\n",
       "    }\n",
       "    \n",
       "    #jupman-toc li {        \n",
       "         padding-left: 3px;\n",
       "    }    \n",
       "    \n",
       "    #jupman-toc .h1 {\n",
       "        font-size:110%; \n",
       "        \n",
       "    }\n",
       "    \n",
       "    #jupman-toc .h2 {\n",
       "        font-size:100%; \n",
       "        padding-left:15px;\n",
       "    }\n",
       "\n",
       "    #jupman-toc .h3 {\n",
       "        font-size:100%; \n",
       "        padding-left:25px;\n",
       "    }\n",
       "    \n",
       "    \n",
       "    \n",
       "    #notebook-container {\n",
       "        box-shadow : none;\n",
       "    -web-kit-box-shadow: none;\n",
       "    }\n",
       "    \n",
       "\n",
       "    #jupman-toc .toc-active {\n",
       "        background: rgba(168, 254, 255, 0.32);\n",
       "    }\n",
       "\n",
       "    .jupman-solution {       \n",
       "        padding:1px;\n",
       "    }\n",
       "\n",
       "    .jupman-solution-header {\n",
       "        display:none;\n",
       "        color: blue;\n",
       "        text-decoration: underline;\n",
       "        cursor: pointer;\n",
       "    }\n",
       " </style>\n",
       "\n",
       "<script>\n",
       "var JUPMAN_IN_JUPYTER = true;\n",
       "\n",
       "/*\n",
       " * JUPYTER MANAGER JavaScript https://github.com/DavidLeoni/jupman \n",
       " * \n",
       " */\n",
       "\n",
       "function toggleVisibility(what){\n",
       "        var e = document.getElementById(what);\n",
       "        if(e.style.display == 'block')\n",
       "          e.style.display = 'none';\n",
       "        else\n",
       "          e.style.display = 'block';\n",
       "    };\n",
       "    \n",
       "\n",
       "function showthis(url) {\n",
       "    window.open(url, \"pres\", \"toolbar=yes,scrollbars=yes,resizable=yes,top=10,left=400,width=500,height=500\");\n",
       "    return(false);\n",
       "}\n",
       "\n",
       "var jupman = {\n",
       "    \n",
       "    /** \n",
       "        Checks if toc was injected in the script. \n",
       "    */\n",
       "    hasToc : function(){\n",
       "        return $('#jupman-toc').toc;\n",
       "    },\n",
       "    \n",
       "    isReduced : function(){\n",
       "        return $(window).width() < 924;\n",
       "    },\n",
       "    hoverToc : function(){\n",
       "        return $('#jupman-toc:hover').length != 0;\n",
       "    },\n",
       "    resize : function(){\n",
       "        if (jupman.isReduced()){\n",
       "            $(\"#jupman-toc\").hide();\n",
       "                \n",
       "        } else {\n",
       "            $(\"#jupman-toc\").show();\n",
       "            $(\"#jupman-toc\").css(\"background\",\"rgba(255, 255, 255, 0)\");\n",
       "            \n",
       "            tocParams = {\n",
       "                \n",
       "                'selectors': 'h1,h2,h3', //elements to use as headings\n",
       "                'container': 'body', //element to find all selectors in\n",
       "                'smoothScrolling': true, //enable or disable smooth scrolling on click\n",
       "                 //doesn't work  'prefix': 'jupman-toc', //prefix for anchor tags and class names\n",
       "                //'onHighlight': function(el) {}, //called when a new section is highlighted \n",
       "                'highlightOnScroll': true, //add class to heading that is currently in focus\n",
       "                'highlightOffset': 100, //offset to trigger the next headline\n",
       "                'anchorName': function(i, heading, prefix) { //custom function for anchor name\n",
       "                    return prefix+i;\n",
       "                },\n",
       "                'headerText': function(i, heading, $heading) { //custom function building the header-item text                  \n",
       "                    return $heading.text().replace(\"¶\",\"\");\n",
       "                },\n",
       "                'itemClass': function(i, heading, $heading, prefix) { // custom function for item class\n",
       "                    return $heading[0].tagName.toLowerCase();\n",
       "                }                \n",
       "            }\n",
       "            \n",
       "            if (jupman.hasToc()){\n",
       "                $('#jupman-toc').toc(tocParams);\n",
       "            }\n",
       "        }\n",
       "    },\n",
       "    /**\n",
       "        Hides cell input\n",
       "        \n",
       "        Renamed in 0.19\n",
       "    */    \n",
       "    hideCell : function(prefixOrRegex){\n",
       "        \n",
       "        $('.border-box-sizing .code_cell pre').filter(function() { \n",
       "                var t = $(this).text();\n",
       "                if (typeof prefixOrRegex == \"string\"){\n",
       "                    return t.indexOf(prefixOrRegex) === 0;\n",
       "                } else if ( prefixOrRegex instanceof RegExp){\n",
       "                    return t.match(prefixOrRegex);\n",
       "                } else {\n",
       "                    console.error(\"Invalid argument:\", prefixOrRegex);\n",
       "                    throw new Error(\"Invalid argument!\");\n",
       "                }\n",
       "            }).parents('div .cell .input').hide();        \n",
       "    },\n",
       "    /**\n",
       "        Hides the cell input AND output.\n",
       "        \n",
       "        @since 0.19\n",
       "    */\n",
       "    hideCellAll : function(prefixOrRegex){        \n",
       "        $('.border-box-sizing .code_cell pre').filter(function() { \n",
       "                var t = $(this).text();\n",
       "                if (typeof prefixOrRegex == \"string\"){\n",
       "                    return t.indexOf(prefixOrRegex) === 0;\n",
       "                } else if ( prefixOrRegex instanceof RegExp){\n",
       "                    return t.match(prefixOrRegex);\n",
       "                } else {\n",
       "                    console.error(\"Invalid argument:\", prefixOrRegex);\n",
       "                    throw new Error(\"Invalid argument!\");\n",
       "                }\n",
       "            }).parents('div .cell ').hide();        \n",
       "    },\n",
       "    \n",
       "    toggleVisibility: function(what){\n",
       "        var e = document.getElementById(what);\n",
       "        if(e.style.display == 'block')\n",
       "          e.style.display = 'none';\n",
       "        else\n",
       "          e.style.display = 'block';\n",
       "    },\n",
       "    \n",
       "    /**\n",
       "     *  Code common to both jupman in jupyter and ReadTheDocs\n",
       "    */\n",
       "    initCommon : function(){\n",
       "        \n",
       "        $(\".jupman-solution-header\").remove();\n",
       "        span = $('<div>');\n",
       "        span.addClass('jupman-solution-header');\n",
       "        span.text('Show/hide solution');\n",
       "        \n",
       "        span.insertBefore(\".jupman-solution\");\n",
       "        \n",
       "        \n",
       "        $(\".jupman-solution\").hide();\n",
       "        $(\".jupman-solution-header\").show();\n",
       "\n",
       "        $('.jupman-solution-header')\n",
       "            .off('click')\n",
       "            .click(function(){\n",
       "                \n",
       "                var uls = $(this).nextAll(\".jupman-solution\");             \n",
       "                var sibling = uls.eq(0);\n",
       "                          \n",
       "                sibling.slideToggle();        \n",
       "                ev.preventDefault();\n",
       "                ev.stopPropagation();\n",
       "        });\n",
       "\n",
       "    },\n",
       "\n",
       "    /**\n",
       "     *   Jupyter only instructions - doesn't run on ReadTheDocs\n",
       "     */\n",
       "    initJupyter : function(){\n",
       "        \n",
       "       var toc = $(\"<div>\").attr(\"id\", \"jupman-toc\");              \n",
       "                                                             \n",
       "       var nav = $(\"<div>\")\n",
       "                     .attr(\"id\", \"jupman-nav\")\n",
       "                    \n",
       "        \n",
       "        \n",
       "       // ****************************     WARNING      ********************************\n",
       "       //         THIS HIDE STUFF DOES NOT WORK IN SPHINX, ONLY WORKS WHEN YOU MANUALLY EXPORT TO HTML \n",
       "       // ******************************************************************************\n",
       "       jupman.hideCell(\"%%HTML\");\n",
       "       jupman.hideCell(\"import jupman\");\n",
       "       \n",
       "        // TODO this is a bit too hacky   \n",
       "       jupman.hideCell(/from exercise(.+)_solution import \\*/)\n",
       "       \n",
       "       jupman.hideCellAll(/.*jupman_init.*/); \n",
       "       jupman.hideCell(\"jupman_show_run(\");\n",
       "       jupman.hideCell(\"nxpd.draw(\");\n",
       "       jupman.hideCellAll(\"jupman_run(\"); \n",
       "       \n",
       "       if (jupman.hasToc()){\n",
       "           if ($(\"#jupman-toc\").length === 0){\n",
       "               $(\"body\").append(toc);       \n",
       "           } else {\n",
       "               $(\"#jupman-toc\").replaceWith(toc);\n",
       "           }\n",
       "       } else {\n",
       "           $(\"#jupman-toc\").hide();\n",
       "       }\n",
       "       \n",
       "       if ($(\"#jupman-nav\").length === 0){\n",
       "           $(\"body\").append(nav);       \n",
       "       } else {\n",
       "           $(\"#jupman-nav\").replaceWith(nav);\n",
       "       }              \n",
       "\n",
       "       \n",
       "        $( window ).resize(function() {\n",
       "            jupman.resize();\n",
       "        });\n",
       "\n",
       "\n",
       "        $(\"body\").on(\"mousemove\",function(event) {\n",
       "            if (jupman.isReduced()){\n",
       "                if (event.pageX < 50) {            \n",
       "                     $(\"#jupman-toc\").show(); \n",
       "                     $(\"#jupman-toc\").css(\"background\",\"rgba(255, 255, 255, 1.0)\");\n",
       "                } else {\n",
       "                    if (jupman.hoverToc()) {                    \n",
       "                    } else {\n",
       "                        $(\"#jupman-toc\").hide();                        \n",
       "                    }\n",
       "\n",
       "        /*            if ($(\"#jupman-toc\").is(\":visible\")){\n",
       "                        if (jupman.hoverToc()) {                    \n",
       "                        } else {\n",
       "                            $(\"#jupman-toc\").hide();                        \n",
       "                        }\n",
       "                    } else {\n",
       "                        if (jupman.hoverToc())\n",
       "                          show\n",
       "                      } else {\n",
       "                        $(\"#jupman-toc\").hide();                        \n",
       "                       }                 \n",
       "                    }\n",
       "          */     \n",
       "                }\n",
       "            }\n",
       "        });\n",
       " \n",
       "        \n",
       "       jupman.resize();\n",
       "       console.log(\"Finished initializing jupman.js in Jupyter Notebook.\")\n",
       "    },\n",
       "    \n",
       "    /**\n",
       "    * RTD only instructions\n",
       "    */\n",
       "    initReadTheDocs : function(){  \n",
       "        \n",
       "        console.log(\"Finished initializing jupman.js in ReadTheDocs\")        \n",
       "    },\n",
       "    \n",
       "    /**\n",
       "     * Initializes jupman.js\n",
       "     */\n",
       "    init : function(){\n",
       "\n",
       "       jupman.initCommon();\n",
       "        \n",
       "       if (typeof JUPMAN_IN_JUPYTER === \"undefined\" || !JUPMAN_IN_JUPYTER ){            \n",
       "           jupman.initReadTheDocs();\n",
       "       } else {\n",
       "           jupman.initJupyter();\n",
       "       }\n",
       "        \n",
       "    }\n",
       "}\n",
       "\n",
       "$(document).ready(jupman.init);\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import jupman;\n",
    "jupman.init()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Jupman Tests\n",
    "\n",
    "In this page we put some tests for Jupyter. The page Title has one sharp, the Sections always have two sharps.\n",
    "\n",
    "## Sezione 1\n",
    "\n",
    "bla bla \n",
    "\n",
    "## Sezione 2\n",
    "\n",
    "Subsections always have three sharps\n",
    "\n",
    "### Subsection 1\n",
    "bla bla \n",
    "\n",
    "### Subsection 2\n",
    "bla bla \n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Download links\n",
    "\n",
    "Files manually put in `overlay/_static` : \n",
    "\n",
    "* Download [trial.odt](_static/trial.odt)\n",
    "* Download [trial.pdf](_static/trial.pdf)\n",
    "\n",
    "Files in arbitrary folder position : \n",
    "\n",
    "* Download [requirements.txt](requirements.txt)\n",
    "\n",
    "NOTE: download links are messy, [see issue 8](https://github.com/DavidLeoni/jupman/issues/8)\n",
    "\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "## Info/Warning Boxes\n",
    "\n",
    "Until there is an info/warning extension for Markdown/CommonMark (see this issue), such boxes can be created by using HTML <div> elements like this:"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<div class=\"alert alert-info\">\n",
    "\n",
    "**Note:** This is an info!\n",
    "\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<div class=\"alert alert-warning\">\n",
    "\n",
    "**Note:** This is a warn!\n",
    "\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "For this to work reliably, you should obey the following guidelines:\n",
    "\n",
    "* The class attribute has to be either \"alert alert-info\" or \"alert alert-warning\", other values will not be converted correctly.\n",
    "* No further attributes are allowed.\n",
    "* For compatibility with CommonMark, you should add an empty line between the <div> start tag and the beginning of the content.\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "\n",
    "## Math\n",
    "\n",
    "For math stuff, [see npshpinx docs](https://nbsphinx.readthedocs.io/en/0.2.14/markdown-cells.html#Equations)\n",
    "\n",
    "Here we put just some equation to show it behaves fine in Jupman\n",
    "\n",
    "This is infinity: $\\infty$"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Image\n",
    "\n",
    "### SVG Images\n",
    "\n",
    "SVG images work in notebook, but here it is commented since it breaks Latex, [see issue](https://github.com/DavidLeoni/jupman/issues/1)\n",
    "\n",
    "```\n",
    "![An image](img/cc-by.svg)\n",
    "```\n",
    "\n",
    "This one also doesn't works (and shows ugly code in the notebook anyway)\n",
    "\n",
    "```\n",
    "from IPython.display import SVG\n",
    "SVG(filename='img/cc-by.svg')\n",
    "```\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### PNG Images\n",
    "\n",
    "![A PNG image](img/notebook_icon.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Toggable cells\n",
    "\n",
    "There are various ways to have toggable cells, for example for showing exercise solutions. Some of the solutions just don't work. Preferred solution for now is with Javascript\n",
    "\n",
    "### Toggling with Javascript (PREFERRED)\n",
    "\n",
    "* Works in MarkDown\n",
    "* Works while in Jupyter\n",
    "* Works in HTML\n",
    "* Does not show in Latex (which might be a good point, if you intend to put somehow solutions at the end of the document)\n",
    "* NOTE: after creating the text to see the results you have to run the initial cell with jupman.init (as for the toc) \n",
    "* NOTE: you can't use Markdown block code since of Sept 2017 doesn't show well in HTML output \n",
    "\n",
    "<div class=\"jupman-solution\">\n",
    "\n",
    "<code>\n",
    "<pre>\n",
    "    # FIRST SOLUTION\n",
    "    question = raw_input(\"What?\")\n",
    "    answers = random.randint(1,8)\n",
    "    if question == \"\":\n",
    "        sys.exit()\n",
    "</pre>\n",
    "</code>\n",
    "</div>\n",
    "\n",
    "<div class=\"jupman-solution\">\n",
    "\n",
    "<code>\n",
    "<pre>\n",
    "    # SECOND SOLUTION\n",
    "    question = raw_input(\"SECOND SOLUTION\")\n",
    "    answers = random.randint(1,8)\n",
    "    if question == \"\":\n",
    "        sys.exit()\n",
    "        \n",
    "</pre>\n",
    "</code>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## HTML details in Markdown, code tag \n",
    "\n",
    "* Works while in Jupyter\n",
    "* Doesn't work in HTML output\n",
    "* as of Sept Oct 2017, not yet supported in Microsoft browsers\n",
    "\n",
    "<details>\n",
    "\n",
    "<summary>Click here to see the code</summary>\n",
    "\n",
    "<code>\n",
    "\n",
    "    question = raw_input(\"What?\")\n",
    "    answers = random.randint(1,8)\n",
    "    if question == \"\":\n",
    "        sys.exit()\n",
    "</code>\n",
    "\n",
    "</details>\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### HTML details in Markdown, Markdown mixed code\n",
    "\n",
    "* Works while in Jupyter \n",
    "* Doesn't work in HTML output\n",
    "* as of Sept Oct 2017, not yet supported in Microsoft browsers\n",
    "\n",
    "\n",
    "<details>\n",
    "\n",
    "<summary>Click here to see the code</summary>\n",
    "\n",
    "```python\n",
    "    question = raw_input(\"What?\")\n",
    "    answers = random.randint(1,8)\n",
    "    if question == \"\":\n",
    "        sys.exit()\n",
    "```\n",
    "\n",
    "</details>\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### HTML details in HTML, raw NBConvert Format \n",
    "\n",
    "* Doesn't work in Jupyter\n",
    "* Works in HTML output\n",
    "    * NOTE: as of Sept Oct 2017, not yet supported in Microsoft browsers\n",
    "* Doesn't show at all in PDF output\n"
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {
    "raw_mimetype": "text/html"
   },
   "source": [
    "<details>\n",
    "<summary>Click here to see the code</summary>\n",
    "<code>\n",
    "<pre>\n",
    "    question = raw_input(\"What?\")\n",
    "    answers = random.randint(1,8)\n",
    "    if question == \"\":\n",
    "        sys.exit()\n",
    "</pre>\n",
    "</code>\n",
    "</details>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Some other Markdown cell aftwerwards ...."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Files in templates\n",
    "\n",
    "Access to jm-templates notebooks: \n",
    "\n",
    "[jm-templates/exam/exam-yyyy-mm-dd.ipynb](jm-templates/exam/exam-yyyy-mm-dd.ipynb)\n",
    "\n",
    "(test for https://github.com/DavidLeoni/jupman/issues/10)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Python tutor\n",
    "\n",
    "There are various ways to embed Python tutor, first we put the recommended one."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### IPython IFrame with jupman.pytut()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**RECOMMENDED**: You can put a call to `jupman.pytut()` at the end of a cell, and the cell code will magically appear in python tutor in the output (except the call to pytut() of course). To see Python tutor you need to be online, both when you execute the cell and when visiting the built website."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "ename": "NameError",
     "evalue": "name 'jupman' is not defined",
     "output_type": "error",
     "traceback": [
      "\u001b[0;31m---------------------------------------------------------------------------\u001b[0m",
      "\u001b[0;31mNameError\u001b[0m                                 Traceback (most recent call last)",
      "\u001b[0;32m<ipython-input-1-031d464dfef4>\u001b[0m in \u001b[0;36m<module>\u001b[0;34m()\u001b[0m\n\u001b[1;32m      4\u001b[0m \u001b[0mz\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0mx\u001b[0m \u001b[0;34m+\u001b[0m \u001b[0my\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m      5\u001b[0m \u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0;32m----> 6\u001b[0;31m \u001b[0mjupman\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mpytut\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m",
      "\u001b[0;31mNameError\u001b[0m: name 'jupman' is not defined"
     ]
    }
   ],
   "source": [
    "\n",
    "x = 5\n",
    "y= 7\n",
    "z = x + y\n",
    "\n",
    "jupman.pytut()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Beware of variables which were initialized in previous cells which won't be available in Python Tutor:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [],
   "source": [
    "w = 8"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "ename": "NameError",
     "evalue": "name 'jupman' is not defined",
     "output_type": "error",
     "traceback": [
      "\u001b[0;31m---------------------------------------------------------------------------\u001b[0m",
      "\u001b[0;31mNameError\u001b[0m                                 Traceback (most recent call last)",
      "\u001b[0;32m<ipython-input-6-bfc7fc0ed66e>\u001b[0m in \u001b[0;36m<module>\u001b[0;34m()\u001b[0m\n\u001b[1;32m      1\u001b[0m \u001b[0mx\u001b[0m \u001b[0;34m=\u001b[0m  \u001b[0mw\u001b[0m \u001b[0;34m+\u001b[0m \u001b[0;36m5\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0;32m----> 2\u001b[0;31m \u001b[0mjupman\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mpytut\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m",
      "\u001b[0;31mNameError\u001b[0m: name 'jupman' is not defined"
     ]
    }
   ],
   "source": [
    "x =  w + 5\n",
    "jupman.pytut()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Raw NB Convert\n",
    "\n",
    "Another option is to directly paste Python Tutor iframe in the cells, and mark the cell as 'Raw NB Convert'. In the notebook you can only see the html, while on the built website it will show Python Tutor (if user has internet connection). \n",
    "\n",
    "Beware: you need the HTTP**S** !"
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {
    "raw_mimetype": "text/html"
   },
   "source": [
    "<iframe width=\"800\" height=\"500\" frameborder=\"0\"\n",
    "        src=\"https://pythontutor.com/iframe-embed.html#code=x+%3D+5%0Ay+%3D+10%0Az+%3D+x+%2B+y&cumulative=false&py=2&curInstr=3\">\n",
    "</iframe>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### NBTutor"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "To show Python Tutor in notebooks, there is already a jupyter extension called [NBTutor](https://github.com/lgpage/nbtutor) , afterwards you can use magic `%%nbtutor` to show the interpreter.\n",
    "\n",
    "Unfortunately, it doesn't show in the generated HTML :-/"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [],
   "source": [
    "%reload_ext nbtutor"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "name": "nbtutor",
     "output_type": "stream",
     "text": []
    }
   ],
   "source": [
    "%%nbtutor\n",
    "\n",
    "for x in range(1,4):\n",
    "    print(\"ciao\")\n",
    "x=5\n",
    "y=7\n",
    "x +y\n"
   ]
  }
 ],
 "metadata": {
  "celltoolbar": "Edit Metadata",
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.5.2"
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": false,
   "sideBar": true,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {},
   "toc_section_display": true,
   "toc_window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}