{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Jupyter Notebooks - Supporting Computing Education\n",
    "\n",
    "This binder configuration has been initialised with a range of packages and extensions to support introductory programming activities.\n",
    "\n",
    "To enable / disable extensions, select the `Edit - nbextensions config` menu item or click on the `Nb_extensions` tab in the notebooks homepage and then force reload the notebook page in your browser."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Jupyter notebooks include code cells that can act, by default, as an interactive IPython command line.\n",
    "\n",
    "For example, enter a simple calculation such as `1 + 2` in a code cell and then run the cell either from the toolbar *Run* button or using the `SHIFT-RETURN` keyboard shortcut."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# An example of hello world\n",
    "\n",
    "print(\"Hello World\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "1+2"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If the last line of a code cell returns a value, that will be displayed as the `Out[]:` value of the cell. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "a=1\n",
    "a"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Jupyter notebook markdown cells can contain non-executable code fragments with language sensitive syntax highlighting.\n",
    "\n",
    "For example, *python*:\n",
    "\n",
    "```python\n",
    "print(\"Hello World!\")\n",
    "```\n",
    "\n",
    "Or *Javascript*:\n",
    "\n",
    "```javascript\n",
    "var msg=\"Hello World!\";\n",
    "alert(msg);\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "variables": {
     " a + a": "2"
    }
   },
   "source": [
    "Python code can also be included and executed in a markdown cell. For example, double click on this cell to see how the following sum is calculated:\n",
    "\n",
    "`a + a = {{ a + a}}`\n",
    "\n",
    "Note that it requires any variables that are referenced to have values set by previously executed code cells. If the variable values are changed the value in the markdown cell will not change unless the markdown cell is re-run."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Line numbering\n",
    "\n",
    "Line numbers can be enabled / disabled in a code cell; select / click in a code cell and use the `ESC-l` keyboard shortcut to toggle line numbers in the selected cell, `SHIFT-l` to toggle line numbers in all code cells."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Code cells can display line numbers\n",
    "print(\"Hello World\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Code Folding\n",
    "\n",
    "Code folding is enabled / disabled using the `Codefolding` notebook extension.\n",
    "\n",
    "The folded state of the code is persisted in a saved notebook."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "code_folding": [
     4
    ]
   },
   "outputs": [],
   "source": [
    "def my_function_uncollapsed(txt='Hello world'):\n",
    "    print(txt)\n",
    "    return txt\n",
    "\n",
    "def my_function_collapsed(txt='Hello world'):\n",
    "    print(txt)\n",
    "    return txt"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {
    "code_folding": [
     0
    ]
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "The code is collapsed under the comment\n"
     ]
    }
   ],
   "source": [
    "# Comments in the first line of a code cell support collapsing too\n",
    "print('The code is collapsed under the comment')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Locked and Frozen Cells\n",
    "\n",
    "Cells can be *locked* (that is, `read-only` and *frozen* using the `Freeze` extension. Select a cell and click on the appropriate toolbar button to select the desired action (*unlock*, *read-only*, *freeze*).\n",
    "\n",
    "read-only: It's input can be viewed by double-clicking on it, but cannot be changed.\n",
    "frozen: Input cannot be viewed by double-clicking.\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "In a *read-only* markdown cell, the input can be viewed by double-clicking on it, but content cannot be edited and the cell cannot be deleted.\n",
    "\n",
    "The *read-only* nature of the cell is revealed by colour -highlighting when you double-click on the cell to try to edit it."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": false,
    "editable": false,
    "run_control": {
     "frozen": true
    }
   },
   "source": [
    "In a *frozen* markdown cell, the cell cannot be deleted and the content can neither be edited nor viewed in edit mode."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "deletable": false,
    "editable": false
   },
   "outputs": [],
   "source": [
    "# *read-only* code cell: can be executed, but cannot be edited or deleted\n",
    "a=\"read_only\"\n",
    "a"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "deletable": false,
    "editable": false,
    "run_control": {
     "frozen": true
    }
   },
   "outputs": [],
   "source": [
    "#*frozen* code cell: cannot be deleted, altered or executed\n",
    "#NON-EXECUTION SEEMS TO BE BROKEN?\n",
    "a=\"frozen\"\n",
    "a"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Variable Inspector\n",
    "\n",
    "A variable inspector panel, from the `varInspector` extension, can be selected from the toolbar to pop up a display showing the variables that have been defined in the current Python session and their values."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Tone Down Error Messages\n",
    "\n",
    "The `Skip Traceback` extension hides a lot of the scary stuff if an error is generated. Clicking the arrow allows the full trace to be displayed."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "ename": "NameError",
     "evalue": "name 'this_is_not_defined' 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-0d4ee401fc71>\u001b[0m in \u001b[0;36m<module>\u001b[0;34m()\u001b[0m\n\u001b[0;32m----> 1\u001b[0;31m \u001b[0mthis_is_not_defined\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m",
      "\u001b[0;31mNameError\u001b[0m: name 'this_is_not_defined' is not defined"
     ]
    }
   ],
   "source": [
    "this_is_not_defined"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Snippets Menu\n",
    "\n",
    "The `Snippets Menu` extension adds a new menu that contains common code fragments. The menu can also be customised with code fragments added via a JSON object defined in the [`Snippets Menu` extension management view](../nbextensions/?nbextension=snippets_menu/main).\n",
    "\n",
    "Snippets can be used as a way of getting boilerplate code to users.\n",
    "\n",
    "To add a snippet, select a cell, such as the code cell below, and then select the desired snippet from the menu."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## turtle\n",
    "\n",
    "\n",
    "A simple turtle widget from https://github.com/gkvoelkl/ipython-turtle-widget\n",
    "\n",
    "This allows activities based around controlling a simple 2D graphical turtle to be run within a notebook environment."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from ipyturtle import Turtle"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "601fdfda35f0469198e2d69d1eea8291"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "#Use a floating display panel\n",
    "t = Turtle()\n",
    "t"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [],
   "source": [
    "t.forward(100)\n",
    "t.right(90)\n",
    "t.forward(100)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Or use a fixed panel:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "2df05003b28d4ae5bbca17400f4002fa"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "t2 = Turtle(fixed=False, width=100, height=100)\n",
    "t2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {},
   "outputs": [],
   "source": [
    "for i in range(4):\n",
    "    t2.forward(10)\n",
    "    t2.right(60)\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {},
   "outputs": [],
   "source": [
    "t2.forward(50)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Blockly Style Programming\n",
    "\n",
    "Learners can get started creating simple programs using a blockly style interface using the `%jigsaw` magic from [Calysto/metakernel](https://github.com/Calysto/metakernel/tree/master/metakernel/magics)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [],
   "source": [
    "#!pip3 install metakernel\n",
    "import metakernel\n",
    "metakernel.register_ipython_magics()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The programme is saved to a local file related to the workspace name:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%jigsaw Python --workspace mynewProgram"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The code in the previous cell is generated from the blockly programme.\n",
    "\n",
    "The blockly programme is also saved as an `.xml` file, which means the notebook session can be closed and the blockly programme reopened in the same - or different - notebook at a later date."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "mynewProgram.html  mynewProgram.xml\r\n"
     ]
    }
   ],
   "source": [
    "!ls *mynewProgram*"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### `nbtutor`\n",
    "\n",
    "Via https://github.com/lgpage/nbtutor\n",
    "\n",
    "The `nbtutor` extension provides a code stepper that lets you step through a code snippet one line at a time and inspect the values of variables that have been set whilst stepping through the code.\n",
    "\n",
    "Note that running the tutor sets the code cell toolbar to the `Visualize` type. To go back to the normal view, select `View -> Cell Toolebar -> None`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 36,
   "metadata": {},
   "outputs": [],
   "source": [
    "%load_ext nbtutor"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 38,
   "metadata": {},
   "outputs": [
    {
     "name": "nbtutor",
     "output_type": "stream",
     "text": []
    }
   ],
   "source": [
    "%%nbtutor -r -f\n",
    "import math\n",
    "\n",
    "def multi(x, y):\n",
    "    tmp=x * y\n",
    "    return y\n",
    "\n",
    "xy=multi(3, 5)\n",
    "print(xy)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "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.3"
  },
  "varInspector": {
   "cols": {
    "lenName": 16,
    "lenType": 16,
    "lenVar": 40
   },
   "kernels_config": {
    "python": {
     "delete_cmd_postfix": "",
     "delete_cmd_prefix": "del ",
     "library": "var_list.py",
     "varRefreshCmd": "print(var_dic_list())"
    },
    "r": {
     "delete_cmd_postfix": ") ",
     "delete_cmd_prefix": "rm(",
     "library": "var_list.r",
     "varRefreshCmd": "cat(var_dic_list()) "
    }
   },
   "types_to_exclude": [
    "module",
    "function",
    "builtin_function_or_method",
    "instance",
    "_Feature"
   ],
   "window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}