<jupyter_start><jupyter_text>Template LessonThroughout this Template lesson you will see how you too can make an Hour of CI lesson.*Lesson Developer: This could be your name<jupyter_code># This code cell starts the necessary setup for Hour of CI lesson notebooks.
# First, it enables users to hide and unhide code by producing a 'Toggle raw code' button below.
# Second, it imports the hourofci package, which is necessary for lessons and interactive Jupyter Widgets.
# Third, it helps hide/control other aspects of Jupyter Notebooks to improve the user experience
# This is an initialization cell
# It is not displayed because the Slide Type is 'Skip'

from IPython.display import HTML, IFrame, Javascript, display
from ipywidgets import interactive
import ipywidgets as widgets
from ipywidgets import Layout

import getpass # This library allows us to get the username (User agent string)

# import package for hourofci project
import sys
sys.path.append('../../supplementary') # relative path (may change depending on the location of the lesson notebook)
import hourofci

# load javascript to initialize/hide cells, get user agent string, and hide output indicator
# hide code by introducing a toggle button "Toggle raw code"
HTML(''' 
    <script type="text/javascript" src=\"../../supplementary/js/custom.js\"></script>
    
    <input id="toggle_code" type="button" value="Toggle raw code">
''')<jupyter_output><empty_output><jupyter_text>Slide headerThis is the top of a slide and you can include text here. This will be the next slide transition creating a level of animation.<jupyter_code># This code cell has a tag "Init" (Setting by going to Toolbar > View > Cell Toolbar > Tags)
# It is automatically run when the notebook is loaded
print("Initialized")<jupyter_output>Initialized<jupyter_text>The code cell below is hidden.<jupyter_code># This code cell has a tag "Hide" (Setting by going to Toolbar > View > Cell Toolbar > Tags)
# Code input is hidden when the notebook is loaded and can be hide/show using the toggle button "Toggle raw code" at the top<jupyter_output><empty_output><jupyter_text>Here comes interactive content!To encourage users participation, we can add some **interactive content** in the lesson. Here are some examples.  D3.js ExampleHere we will use an IFrame to display the d3 example, which is a saved HTML page. User interaction with it can be recorded in our database.This example is located in supplementary/d3-example-dresser.html. After the answer is sent to the database, a message "The answer is true/false" will be written to the console.  Coordinate systems are everywhereThey are used to label the location of things, so that we can find them again!This dresser, for example, has a coordinate system!- Your stuffed hippo is in the lower right drawer, go get it!- Stuffed hippo **coordinates**: (lower drawer, right drawer){{IFrame("supplementary/d3-example-dresser.html", width=620, height=630)}}  Code exampleHere we can have a code example embedded with Markdown. This cell is Markdown. The next cell is slide type "-" which will show on the same slide, but is a code cell.**Add the question index as a tag** (e.g.,"Q1") to the next code cell, and encourage users to play with the code. The play button on the left of the code cell can **run the code and record the action**.      - Move your mouse to the left of the code and click on the play button.<jupyter_code># This code cell has a tag "Q1"

print("Hello World!")<jupyter_output>Hello World!<jupyter_text>Image example.We can include images. They should be stored in the 'supplementary' folder. Here we are viewing the hippo-logo.png image.![Hour of CI Hippo Logo](supplementary/hippo-logo.png)  Another image optionIf your image is too big. Instead of using Markdown we can use html to view the image. This gives us the ability to control the size of the image.  Widget example<jupyter_code># Multiple choice question using a RadioButton widget
# This code cell has tags "Init", "Hide", and "Q2"

widget1 = widgets.RadioButtons(
    options = ['never', 'monthly','weekly', 'daily', 'hourly', 'all the time'],
    description = 'How often do I ask myself WHERE questions:', style={'description_width': 'initial'},
    layout = Layout(width='100%'),
    value = None
)

# Show the options.
display(widget1)

# Submit button: print and log the results
# Parameters:
#     user_agent, lesson, lesson_level: have been retrieved automatically; do not need to input a value
#     question: 'Q1','Q2','Q3','Q4','Q5'... (add the question number as a tag)
#     widget: the widget of which value will be submitted
hourofci.SubmitBtn(user_agent, lesson, lesson_level, 'Q2',widget1)<jupyter_output><empty_output>
{'fraction_non_alphanumeric': 0.0790144435004248, 'fraction_numerical': 0.005310110450297366, 'mean_word_length': 4.792127921279213, 'pattern_counts': {'":': 0, '<': 22, '<?xml version=': 0, '>': 28, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'chain_length': '5', 'dir': 'jupyter-structured-clean-dedup', 'id': '449951', 'license': 'BSD-3-Clause', 'n_tokens_mistral': 1306, 'n_tokens_neox': 1270, 'n_words': 642, 'path': 'template-lesson/template/template.ipynb', 'repo_name': 'mohsen-gis/hourofci', 'size': '4708'}