Start Here.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Subplots Demo Notebook\n",
    "\n",
    "Hello! Thank you for helping us evaluate the concept of secondary narratives in computational notebooks!\n",
    "\n",
    "\"sideline\" is an extension for the Jupyter Notebook platform, already installed here on the Jupyter instance serving you this notebook.\n",
    "\n",
    "For the study we use a modified version of sideline, which logs basic user interactions with the extension (interacting with buttons and secondary narratives, and when you load the notebook and submit a task). For now, please fill out the following information about yourself (necessary to contextualize your results against those of your peers, so we can test our hypotheses):\n",
    "\n",
    "<div style=\"display: none\" id=\"notebookName\">start_here</div>"
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {},
   "source": [
    "Age:"
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {},
   "source": [
    "Gender:"
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {},
   "source": [
    "Experience programming in years:"
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {},
   "source": [
    "Experience with Python in years:"
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {},
   "source": [
    "Any previous experience with Computational Notebooks: "
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {},
   "source": [
    "Professional occupation (student, data scientist, etc.):"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Basic functionality\n",
    "\n",
    "We made a quick, 30-second video introduction to interacting with the extension and secondary narratives: [YouTube Link](#)  \n",
    "\n",
    "If you prefer a written guide, read on, otherwise you can skip this cell:   \n",
    "\n",
    "First off: you can show and hide everything to the right (\"secondary narratives\", or sometimes called \"subplots\" - meant like the literary plot of a book) with the <i class=\"fa fa-eye\"></i> button on the toolbar above.  \n",
    "\n",
    "The <i class=\"fa fa-thumb-tack\"></i> button creates a new secondary narrative from the currently selected cell, and inserts a \"reference\" cell at its original position in the main notebook.\n",
    "\n",
    "The <i class=\"fa fa-ban\"></i> button moves the currently selected cell and all other cells of that secondary narrative back into the main notebook, at the position of the reference cell pointing to that secondary narrative.\n",
    "\n",
    "The <i class=\"fa fa-retweet\"></i> button re-scans cells and re-applies buttons on linking cells, re-applies layout, etc. - in case something isn't initially quite loading right on your machine.\n",
    "\n",
    "Try clicking the buttons next to the cell below referencing `\"sideline - link to subplot 1\"` to hide or scroll to secondary narrative 1.  \n",
    "\n",
    "Note on running/executing cells:  \n",
    "Executing a reference cell will execute all cells that belong to the subplots it references. This behaviour is illustrated in the cells below."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "sideline - link to subplot 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "#execution order demonstration\n",
    "important_var = \"this is my starting value\"\n",
    "print(\"important_var: \" + important_var)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "sideline - link to subplot 2\n",
    "\n",
    "Aside from the first line, reference cells (like this one) can be edited to improve readability of your work. You could describe what a certain subplot contains, for example."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "print(\"important_var: \" + important_var)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "sideline - link to subplot 4"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### One more thing...  \n",
    "\n",
    "For this study, we've added another button to the button group above.  \n",
    "The <i class=\"fa fa-upload\"></i> button uploads the notebook to a logging server. This is necessary because binder is ephemeral by principle, and without logging we have no way of analyzing your answers to our upcoming tasks.  \n",
    "Please click it once now, to send and save this notebook, which includes the information you entered about yourself. We will also include a reminder at the end of the upcoming notebooks."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Following are some tasks we would ask you to solve the demonstrate the advantages of utilizing secondary narratives.\n",
    "\n",
    "Click here to go to <span class=\"sideline-link-to-next\">[Task 1.1](Task%201_1.ipynb)</span>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "tags": [
     "subplot-1"
    ]
   },
   "source": [
    "### I am a subplot!\n",
    "\n",
    "I can contain code for exploration, data cleaning or other tasks that may be necessary or interesting, but I am probably not as important as the narrative this notebook is trying to tell."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "tags": [
     "subplot-1"
    ]
   },
   "source": [
    "Cells belonging to a subplot will be executed directly after the referencing cell in the main narrative (the left side) is executed. All remaining subplots (and the cells they contain) are executed AFTER the main narrative.  \n",
    "  \n",
    "If you are done with this introductory subplot, you can collapse it using the toggle button next to referencing cell on the left. Or, you can collapse (\"hide\") all subplots and show a \"normal\" notebook layout with the <i class=\"fa fa-eye\"></i> button this extension added in the toolbar above."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "tags": [
     "subplot-2"
    ]
   },
   "source": [
    "#### subplot 2\n",
    "A subplot can be composed of one or more cells."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "tags": [
     "subplot-2"
    ]
   },
   "outputs": [],
   "source": [
    "#like this one!\n",
    "important_var = \"my value was changed when subplot 2 was executed immediately after the referencing cell!\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "tags": [
     "subplot-4"
    ]
   },
   "outputs": [],
   "source": [
    "#try selecting me and press the \"unpin\" button in the toolbar above!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "tags": [
     "subplot-4"
    ]
   },
   "outputs": [],
   "source": [
    "#all cells in this subplot will be inserted at the location of the reference cell"
   ]
  }
 ],
 "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.7.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}