j1-template 2022.2.2 → 2022.3.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/_includes/themes/j1/blocks/footer/boxes/contacts_box.proc +46 -18
- data/_includes/themes/j1/blocks/footer/boxes/links_box.proc +1 -0
- data/assets/data/fab.html +2 -2
- data/assets/data/footer.html +2 -2
- data/assets/themes/j1/adapter/js/analytics.js +13 -13
- data/assets/themes/j1/adapter/js/cookieConsent.js +1 -1
- data/assets/themes/j1/adapter/js/nbinteract.js +366 -120
- data/assets/themes/j1/core/css/themes/unodark/bootstrap.css +30 -40
- data/assets/themes/j1/core/css/themes/unodark/bootstrap.min.css +1 -1
- data/assets/themes/j1/core/css/themes/unolight/bootstrap.css +85 -216
- data/assets/themes/j1/core/css/themes/unolight/bootstrap.min.css +2 -2
- data/assets/themes/j1/core/js/template.js +1 -1
- data/assets/themes/j1/core/js/template.min.js +1 -1
- data/assets/themes/j1/core/js/template.min.js.map +1 -1
- data/assets/themes/j1/modules/carousel/css/theme/uno.css +5 -0
- data/assets/themes/j1/modules/carousel/css/theme/uno.min.css +1 -1
- data/assets/themes/j1/modules/cookieConsent/js/cookieConsent.js +1 -0
- data/assets/themes/j1/modules/justifiedGallery/css/justifiedGallery.css +6 -0
- data/assets/themes/j1/modules/justifiedGallery/css/justifiedGallery.min.css +1 -1
- data/assets/themes/j1/modules/mmenuLight/css/mmenu-light.css +2 -2
- data/assets/themes/j1/modules/mmenuLight/css/mmenu-light.min.css +1 -2
- data/assets/themes/j1/modules/nbInteract/README.md +169 -0
- data/assets/themes/j1/modules/nbInteract/css/nbinteract-core.css +4 -0
- data/assets/themes/j1/modules/nbInteract/css/nbinteract-core.min.css +4 -0
- data/assets/themes/j1/modules/nbInteract/css/theme/uno/nbinteract-core.css +33 -33
- data/assets/themes/j1/modules/nbInteract/css/theme/uno/nbinteract-core.min.css +1 -1
- data/assets/themes/j1/modules/nbInteract/js/requireJS/require.js +2068 -0
- data/assets/themes/j1/modules/nbInteract/js/requireJS/require.min.js +36 -0
- data/assets/themes/j1/modules/plotly/LICENSE +21 -0
- data/assets/themes/j1/modules/plotly/README.md +32 -0
- data/assets/themes/j1/modules/plotly/js/plotly.js +265345 -0
- data/assets/themes/j1/modules/plotly/js/plotly.min.js +65 -0
- data/assets/themes/j1/modules/requirejs/LICENSE +45 -0
- data/assets/themes/j1/modules/requirejs/README.md +79 -0
- data/assets/themes/j1/modules/requirejs/js/require.js +2068 -0
- data/assets/themes/j1/modules/requirejs/js/require.min.js +36 -0
- data/lib/j1/version.rb +1 -1
- data/lib/starter_web/Gemfile +1 -1
- data/lib/starter_web/_config.yml +1 -1
- data/lib/starter_web/_data/blocks/defaults/footer.yml +25 -17
- data/lib/starter_web/_data/blocks/footer.yml +78 -65
- data/lib/starter_web/_data/modules/analytics.yml +8 -23
- data/lib/starter_web/_data/modules/defaults/analytics.yml +1 -1
- data/lib/starter_web/_data/modules/defaults/cookieconsent.yml +4 -1
- data/lib/starter_web/_data/modules/justifiedGallery.yml +14 -8
- data/lib/starter_web/_data/modules/navigator_menu.yml +6 -3
- data/lib/starter_web/_data/modules/nbinteract.yml +12 -48
- data/lib/starter_web/_data/resources.yml +52 -18
- data/lib/starter_web/_includes/attributes.asciidoc +25 -0
- data/lib/starter_web/_plugins/lunr_index.rb +1 -1
- data/lib/starter_web/assets/images/pages/nbinteract/mandelbrot-menge-1920x1200.jpg +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/mandelbrot-menge.png +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_bar.jpg +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_hist.jpg +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_line.jpg +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_multiple_choice.jpg +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_scatter.jpg +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_scatter_drag.jpg +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_short_answer.jpg +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/nbi-textbook-example.jpg +0 -0
- data/lib/starter_web/assets/videos/gallery/kick-it-old-school-poster.jpg +0 -0
- data/lib/starter_web/assets/videos/gallery/nye-party-shop-poster.jpg +0 -0
- data/lib/starter_web/assets/videos/gallery/stay-colorful-poster.jpg +0 -0
- data/lib/starter_web/collections/posts/public/series/_posts/2020-01-01-post-wiki-series.adoc +1 -0
- data/lib/starter_web/collections/posts/public/series/_posts/2020-01-02-post-wiki-series.adoc +1 -0
- data/lib/starter_web/collections/posts/public/series/_posts/2020-01-03-post-wiki-series.adoc +1 -0
- data/lib/starter_web/package.json +1 -2
- data/lib/starter_web/pages/public/jupyter/docs/_includes/documents/j1_docs_example_static.asciidoc +232 -232
- data/lib/starter_web/pages/public/jupyter/docs/j1-nbinteract-doc.adoc +165 -149
- data/lib/starter_web/pages/public/jupyter/docs/nbi-widget-manual.adoc +156 -11
- data/lib/starter_web/pages/public/jupyter/docs/nbinteract-doc.adoc +11 -6
- data/lib/starter_web/pages/public/jupyter/examples/j1-circular-times-table.adoc +136 -0
- data/lib/starter_web/pages/public/jupyter/examples/j1-interactive-widgets.adoc +9 -5
- data/lib/starter_web/pages/public/jupyter/examples/j1-odes-in-python.adoc +16 -7
- data/lib/starter_web/pages/public/jupyter/examples/j1-testing-plotly.adoc +95 -0
- data/lib/starter_web/pages/public/jupyter/examples/j1_climate-change-forecast.adoc +4 -4
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/{algebra_with_sympy-checkpoint.ipynb → j1_circular_times_table-checkpoint.ipynb} +5190 -7291
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/j1_climate_change_forecast-checkpoint.ipynb +2 -2
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/j1_docs_example_dynamic-checkpoint.ipynb +1 -1
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/j1_interactive_widgets-checkpoint.ipynb +170 -15
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/j1_ode_selected-checkpoint.ipynb +1 -1
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/j1_odes_in_python-checkpoint.ipynb +520 -111
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/factor_by_factor.mp4 +0 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/{.ipynb_checkpoints/j1_algebra_with_sympy-checkpoint.ipynb → j1_circular_times_table.ipynb} +5178 -7308
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/j1_climate_change_forecast.ipynb +2 -2
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/j1_docs_example_dynamic.ipynb +1 -1
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/j1_interactive_widgets.ipynb +170 -15
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/{j1_ode_selected.ipynb → j1_odes_in_python.ipynb} +783 -34
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/line_by_line.mp4 +0 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/point_by_point.mp4 +0 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/nbi-docs/.ipynb_checkpoints/nbi_docs_recipes_interactive_questions-checkpoint.ipynb +185 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/nbi-docs/.ipynb_checkpoints/nbi_docs_tutorial_interact-checkpoint.ipynb +254 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/nbi-docs/.ipynb_checkpoints/nbi_docs_tutorial_monty_hall-checkpoint.ipynb +732 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/nbi-docs/nbi_docs_recipes_interactive_questions.ipynb +19 -22
- data/lib/starter_web/pages/public/jupyter/notebooks/nbi-docs/nbi_docs_tutorial_monty_hall.ipynb +25 -26
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_circular_times_table.html +746 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_climate_change_forecast.html +2 -2
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_interactive_widgets.html +217 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_odes_in_python.html +955 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_recipes_interactive_questions.html +1 -2
- data/lib/starter_web/pages/public/jupyter/{apis/binderhub-api.adoc → services/binderhub.adoc} +25 -28
- data/lib/starter_web/pages/public/jupyter/{apis/jupyterhub-api.adoc → services/jupyterhub.adoc} +8 -9
- data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc +1 -1
- data/lib/starter_web/pages/public/learn/roundtrip/100_present_videos.adoc +9 -15
- data/lib/starter_web/pages/public/learn/roundtrip/200_typography.adoc +1 -1
- data/lib/starter_web/pages/public/learn/roundtrip/300_icon_fonts.adoc +12 -1
- data/lib/starter_web/pages/public/learn/roundtrip/400_asciidoc_extensions.adoc +1 -1
- data/lib/starter_web/pages/public/learn/roundtrip/410_bs_modals_extentions.adoc +1 -1
- data/lib/starter_web/pages/public/learn/roundtrip/420_responsive_tables_extensions.adoc +1 -1
- data/lib/starter_web/pages/public/legal/en/300_privacy.adoc +117 -12
- data/lib/starter_web/pages/public/se/se-fake.adoc +47 -0
- data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
- data/lib/starter_web/utilsrv/package.json +1 -1
- metadata +41 -41
- data/lib/starter_web/_data/_resources.yml +0 -1668
- data/lib/starter_web/assets/images/pages/nbinteract/binderhub-architecture.png +0 -0
- data/lib/starter_web/assets/videos/gallery/adriana-lima-poster.jpg +0 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/binder/binder-launches.ipynb +0 -385
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/Untitled-checkpoint.ipynb +0 -6
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/binder-launches-checkpoint.ipynb +0 -385
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/climate-change-forecast-checkpoint.ipynb +0 -916
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/google_altair-checkpoint.ipynb +0 -33
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/ipympl_test_plots-checkpoint.ipynb +0 -14517
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/j1_altair_interactive-checkpoint.ipynb +0 -16493
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/j1_altair_interactive_test-checkpoint.ipynb +0 -14697
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/j1_altair_visualization-checkpoint.ipynb +0 -15358
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/j1_altair_visualization_full-checkpoint.ipynb +0 -2576
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/j1_climate_change_forecast.ipynb +0 -1060
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/j1_docs_hist-checkpoint.ipynb +0 -98
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/j1_interactive-checkpoint.ipynb +0 -560
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/j1_ipympl_test_plots-checkpoint.ipynb +0 -14511
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/j1_pandas_creating_reading_and_writing-checkpoint.ipynb +0 -328
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/j1_recipes_layout-checkpoint.ipynb +0 -341
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/nbi_docs_recipes_graphing-checkpoint.ipynb +0 -98
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/binder-launches.ipynb +0 -411
- data/lib/starter_web/pages/public/jupyter/notebooks/nbi-docs/.ipynb_checkpoints/nbi_docs_examples_correlation-checkpoint.ipynb +0 -651
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/binder-launches.html +0 -546
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_ode_selected.html +0 -186
- data/lib/starter_web/pages/public/jupyter/notebooks/themes/altair/excel.py +0 -55
- data/lib/starter_web/pages/public/jupyter/notebooks/themes/altair/ggplot.py +0 -108
- data/lib/starter_web/pages/public/jupyter/notebooks/themes/altair/ggplot2.py +0 -108
- data/lib/starter_web/pages/public/jupyter/notebooks/themes/altair/husky.py +0 -121
- data/lib/starter_web/pages/public/jupyter/notebooks/themes/altair/latimes.py +0 -149
- data/lib/starter_web/pages/public/jupyter/notebooks/themes/altair/pcolor.py +0 -6
- data/lib/starter_web/pages/public/jupyter/notebooks/themes/altair/quartz.py +0 -55
- data/lib/starter_web/pages/public/jupyter/notebooks/themes/altair/spacy_base.py +0 -94
- data/lib/starter_web/pages/public/jupyter/notebooks/themes/altair/spacy_mono.py +0 -158
- data/lib/starter_web/pages/public/jupyter/notebooks/themes/altair/sunsentinel.py +0 -125
Binary file
|
@@ -0,0 +1,185 @@
|
|
1
|
+
{
|
2
|
+
"cells": [
|
3
|
+
{
|
4
|
+
"cell_type": "markdown",
|
5
|
+
"metadata": {},
|
6
|
+
"source": [
|
7
|
+
"### Interactive Questions\n",
|
8
|
+
"nbinteract also provides built-in methods to easily create multiple choice and short answer questions."
|
9
|
+
]
|
10
|
+
},
|
11
|
+
{
|
12
|
+
"cell_type": "code",
|
13
|
+
"execution_count": 1,
|
14
|
+
"metadata": {},
|
15
|
+
"outputs": [],
|
16
|
+
"source": [
|
17
|
+
"import nbinteract as nbi"
|
18
|
+
]
|
19
|
+
},
|
20
|
+
{
|
21
|
+
"cell_type": "markdown",
|
22
|
+
"metadata": {},
|
23
|
+
"source": [
|
24
|
+
"#### nbinteract.multiple_choice\n",
|
25
|
+
"\n",
|
26
|
+
"`nbinteract.multiple_choice` takes a question, a list of possible answer choices, and the correct answer. Clicking the buttons shows whether the choice was correct."
|
27
|
+
]
|
28
|
+
},
|
29
|
+
{
|
30
|
+
"cell_type": "code",
|
31
|
+
"execution_count": 7,
|
32
|
+
"metadata": {},
|
33
|
+
"outputs": [
|
34
|
+
{
|
35
|
+
"data": {
|
36
|
+
"application/vnd.jupyter.widget-view+json": {
|
37
|
+
"model_id": "5e2cf7e8eff64a6aaf9dfcad8cfa63eb",
|
38
|
+
"version_major": 2,
|
39
|
+
"version_minor": 0
|
40
|
+
},
|
41
|
+
"text/plain": [
|
42
|
+
"VBox(children=(HTML(value='<p style=\"line-height:18px;\">What is 10 + 2 * 5?</p>'), HBox(children=(Button(layou…"
|
43
|
+
]
|
44
|
+
},
|
45
|
+
"metadata": {},
|
46
|
+
"output_type": "display_data"
|
47
|
+
}
|
48
|
+
],
|
49
|
+
"source": [
|
50
|
+
"nbi.multiple_choice(question=\"What is 10 + 2 * 5?\",\n",
|
51
|
+
" choices=['12', '60', '20'],\n",
|
52
|
+
" answers=2)"
|
53
|
+
]
|
54
|
+
},
|
55
|
+
{
|
56
|
+
"cell_type": "code",
|
57
|
+
"execution_count": 8,
|
58
|
+
"metadata": {},
|
59
|
+
"outputs": [
|
60
|
+
{
|
61
|
+
"data": {
|
62
|
+
"application/vnd.jupyter.widget-view+json": {
|
63
|
+
"model_id": "29e1ab27776a49b0b832c241d449c92a",
|
64
|
+
"version_major": 2,
|
65
|
+
"version_minor": 0
|
66
|
+
},
|
67
|
+
"text/plain": [
|
68
|
+
"VBox(children=(HTML(value='<p style=\"line-height:18px;\">Select all prime numbers.</p>'), HBox(children=(Button…"
|
69
|
+
]
|
70
|
+
},
|
71
|
+
"metadata": {},
|
72
|
+
"output_type": "display_data"
|
73
|
+
}
|
74
|
+
],
|
75
|
+
"source": [
|
76
|
+
"nbi.multiple_choice(question=\"Select all prime numbers.\",\n",
|
77
|
+
" choices=['12', '3', '31'],\n",
|
78
|
+
" answers=[1, 2])"
|
79
|
+
]
|
80
|
+
},
|
81
|
+
{
|
82
|
+
"cell_type": "markdown",
|
83
|
+
"metadata": {},
|
84
|
+
"source": [
|
85
|
+
"#### nbinteract.short_answer\n",
|
86
|
+
"\n",
|
87
|
+
"`nbinteract.short_answer` takes a question and an answer. The answer can either be a string, a list of strings, or a function that returns `True` when called with the user's input. If the function errors, an error message will be displayed."
|
88
|
+
]
|
89
|
+
},
|
90
|
+
{
|
91
|
+
"cell_type": "code",
|
92
|
+
"execution_count": 9,
|
93
|
+
"metadata": {},
|
94
|
+
"outputs": [
|
95
|
+
{
|
96
|
+
"data": {
|
97
|
+
"application/vnd.jupyter.widget-view+json": {
|
98
|
+
"model_id": "e30f724e97bf4d5fac072777e3fe1d45",
|
99
|
+
"version_major": 2,
|
100
|
+
"version_minor": 0
|
101
|
+
},
|
102
|
+
"text/plain": [
|
103
|
+
"VBox(children=(HTML(value='<p style=\"line-height:18px;\">What is 1+1?</p>'), HBox(children=(Text(value='', plac…"
|
104
|
+
]
|
105
|
+
},
|
106
|
+
"metadata": {},
|
107
|
+
"output_type": "display_data"
|
108
|
+
}
|
109
|
+
],
|
110
|
+
"source": [
|
111
|
+
"nbi.short_answer('What is 1+1?', answers='2', explanation='1+1 is 2')"
|
112
|
+
]
|
113
|
+
},
|
114
|
+
{
|
115
|
+
"cell_type": "code",
|
116
|
+
"execution_count": 10,
|
117
|
+
"metadata": {},
|
118
|
+
"outputs": [
|
119
|
+
{
|
120
|
+
"data": {
|
121
|
+
"application/vnd.jupyter.widget-view+json": {
|
122
|
+
"model_id": "c171c255bbb74f289fe3211f41430ab6",
|
123
|
+
"version_major": 2,
|
124
|
+
"version_minor": 0
|
125
|
+
},
|
126
|
+
"text/plain": [
|
127
|
+
"VBox(children=(HTML(value='<p style=\"line-height:18px;\">Enter the first name of a member of the Beatles.</p>')…"
|
128
|
+
]
|
129
|
+
},
|
130
|
+
"metadata": {},
|
131
|
+
"output_type": "display_data"
|
132
|
+
}
|
133
|
+
],
|
134
|
+
"source": [
|
135
|
+
"nbi.short_answer('Enter the first name of a member of the Beatles.',\n",
|
136
|
+
" ['John', 'Paul', 'George', 'Ringo'])"
|
137
|
+
]
|
138
|
+
},
|
139
|
+
{
|
140
|
+
"cell_type": "code",
|
141
|
+
"execution_count": 6,
|
142
|
+
"metadata": {},
|
143
|
+
"outputs": [
|
144
|
+
{
|
145
|
+
"data": {
|
146
|
+
"application/vnd.jupyter.widget-view+json": {
|
147
|
+
"model_id": "84b47630b6bf4e8f9f318d8502e161f3",
|
148
|
+
"version_major": 2,
|
149
|
+
"version_minor": 0
|
150
|
+
},
|
151
|
+
"text/plain": [
|
152
|
+
"VBox(children=(HTML(value='<p style=\"line-height:18px;\">Enter an even number.</p>'), HBox(children=(Text(value…"
|
153
|
+
]
|
154
|
+
},
|
155
|
+
"metadata": {},
|
156
|
+
"output_type": "display_data"
|
157
|
+
}
|
158
|
+
],
|
159
|
+
"source": [
|
160
|
+
"nbi.short_answer('Enter an even number.', lambda x: int(x) % 2 == 0)"
|
161
|
+
]
|
162
|
+
}
|
163
|
+
],
|
164
|
+
"metadata": {
|
165
|
+
"kernelspec": {
|
166
|
+
"display_name": "Python 3",
|
167
|
+
"language": "python",
|
168
|
+
"name": "python3"
|
169
|
+
},
|
170
|
+
"language_info": {
|
171
|
+
"codemirror_mode": {
|
172
|
+
"name": "ipython",
|
173
|
+
"version": 3
|
174
|
+
},
|
175
|
+
"file_extension": ".py",
|
176
|
+
"mimetype": "text/x-python",
|
177
|
+
"name": "python",
|
178
|
+
"nbconvert_exporter": "python",
|
179
|
+
"pygments_lexer": "ipython3",
|
180
|
+
"version": "3.7.9"
|
181
|
+
}
|
182
|
+
},
|
183
|
+
"nbformat": 4,
|
184
|
+
"nbformat_minor": 2
|
185
|
+
}
|
@@ -0,0 +1,254 @@
|
|
1
|
+
{
|
2
|
+
"cells": [
|
3
|
+
{
|
4
|
+
"cell_type": "markdown",
|
5
|
+
"metadata": {},
|
6
|
+
"source": [
|
7
|
+
"### A Simple Webpage\n",
|
8
|
+
"\n",
|
9
|
+
"In this section, you will create and publish a simple interactive webpage!\n",
|
10
|
+
"\n",
|
11
|
+
"In Jupyter, create a notebook and name it `tutorial.ipynb`. Type or paste in the code from this tutorial into the notebook."
|
12
|
+
]
|
13
|
+
},
|
14
|
+
{
|
15
|
+
"cell_type": "markdown",
|
16
|
+
"metadata": {},
|
17
|
+
"source": [
|
18
|
+
"#### Using Interact"
|
19
|
+
]
|
20
|
+
},
|
21
|
+
{
|
22
|
+
"cell_type": "markdown",
|
23
|
+
"metadata": {},
|
24
|
+
"source": [
|
25
|
+
"The `ipywidgets` library provides the simplest way to get started writing interactive documents. Although the library itself has its own documentation, we will provide a quick overview to let you get started as quickly as possible.\n",
|
26
|
+
"\n",
|
27
|
+
"We start by importing the `interact` function:"
|
28
|
+
]
|
29
|
+
},
|
30
|
+
{
|
31
|
+
"cell_type": "code",
|
32
|
+
"execution_count": 1,
|
33
|
+
"metadata": {},
|
34
|
+
"outputs": [],
|
35
|
+
"source": [
|
36
|
+
"from ipywidgets import interact"
|
37
|
+
]
|
38
|
+
},
|
39
|
+
{
|
40
|
+
"cell_type": "markdown",
|
41
|
+
"metadata": {},
|
42
|
+
"source": [
|
43
|
+
"The `interact` function takes in a function and produces an interface to call the function with different parameters."
|
44
|
+
]
|
45
|
+
},
|
46
|
+
{
|
47
|
+
"cell_type": "code",
|
48
|
+
"execution_count": 2,
|
49
|
+
"metadata": {},
|
50
|
+
"outputs": [],
|
51
|
+
"source": [
|
52
|
+
"def square(x):\n",
|
53
|
+
" return x * x"
|
54
|
+
]
|
55
|
+
},
|
56
|
+
{
|
57
|
+
"cell_type": "markdown",
|
58
|
+
"metadata": {},
|
59
|
+
"source": [
|
60
|
+
"Pass the `square` function into `interact` and specify `square`'s arguments as keyword arguments:"
|
61
|
+
]
|
62
|
+
},
|
63
|
+
{
|
64
|
+
"cell_type": "code",
|
65
|
+
"execution_count": 3,
|
66
|
+
"metadata": {},
|
67
|
+
"outputs": [
|
68
|
+
{
|
69
|
+
"data": {
|
70
|
+
"application/vnd.jupyter.widget-view+json": {
|
71
|
+
"model_id": "8ce32e90254541748b63ca19a5c0f546",
|
72
|
+
"version_major": 2,
|
73
|
+
"version_minor": 0
|
74
|
+
},
|
75
|
+
"text/plain": [
|
76
|
+
"interactive(children=(IntSlider(value=10, description='x', max=30, min=-10), Output()), _dom_classes=('widget-…"
|
77
|
+
]
|
78
|
+
},
|
79
|
+
"metadata": {},
|
80
|
+
"output_type": "display_data"
|
81
|
+
}
|
82
|
+
],
|
83
|
+
"source": [
|
84
|
+
"interact(square, x=10);"
|
85
|
+
]
|
86
|
+
},
|
87
|
+
{
|
88
|
+
"cell_type": "markdown",
|
89
|
+
"metadata": {},
|
90
|
+
"source": [
|
91
|
+
"To control the range of values `x` can take, you can pass in a tuple of the same format as Python's `range` function:"
|
92
|
+
]
|
93
|
+
},
|
94
|
+
{
|
95
|
+
"cell_type": "code",
|
96
|
+
"execution_count": 4,
|
97
|
+
"metadata": {},
|
98
|
+
"outputs": [
|
99
|
+
{
|
100
|
+
"data": {
|
101
|
+
"application/vnd.jupyter.widget-view+json": {
|
102
|
+
"model_id": "1d942477ae474105948fd02a3523afc9",
|
103
|
+
"version_major": 2,
|
104
|
+
"version_minor": 0
|
105
|
+
},
|
106
|
+
"text/plain": [
|
107
|
+
"interactive(children=(IntSlider(value=50, description='x', step=10), Output()), _dom_classes=('widget-interact…"
|
108
|
+
]
|
109
|
+
},
|
110
|
+
"metadata": {},
|
111
|
+
"output_type": "display_data"
|
112
|
+
}
|
113
|
+
],
|
114
|
+
"source": [
|
115
|
+
"interact(square, x=(0, 100, 10));"
|
116
|
+
]
|
117
|
+
},
|
118
|
+
{
|
119
|
+
"cell_type": "markdown",
|
120
|
+
"metadata": {},
|
121
|
+
"source": [
|
122
|
+
"Notice how dragging the slider changes the input to the `square` function and automatically updates the output. This is a powerful idea that we will build on for the rest of this tutorial.\n",
|
123
|
+
"\n",
|
124
|
+
"By using `interact`, you can build complex widget-based interfaces in a notebook. These widgets will appear in your resulting webpage, giving your page interactivity."
|
125
|
+
]
|
126
|
+
},
|
127
|
+
{
|
128
|
+
"cell_type": "markdown",
|
129
|
+
"metadata": {},
|
130
|
+
"source": [
|
131
|
+
"#### Widget Types"
|
132
|
+
]
|
133
|
+
},
|
134
|
+
{
|
135
|
+
"cell_type": "markdown",
|
136
|
+
"metadata": {},
|
137
|
+
"source": [
|
138
|
+
"Notice that `interact` automatically generates a slider because the argument is numeric. Other types of arguments will generate different types of interfaces. For example, a string will generate a textbox."
|
139
|
+
]
|
140
|
+
},
|
141
|
+
{
|
142
|
+
"cell_type": "code",
|
143
|
+
"execution_count": 5,
|
144
|
+
"metadata": {},
|
145
|
+
"outputs": [],
|
146
|
+
"source": [
|
147
|
+
"def friends(name, number):\n",
|
148
|
+
" return '{} has {} friends!'.format(name, number)"
|
149
|
+
]
|
150
|
+
},
|
151
|
+
{
|
152
|
+
"cell_type": "code",
|
153
|
+
"execution_count": 6,
|
154
|
+
"metadata": {},
|
155
|
+
"outputs": [
|
156
|
+
{
|
157
|
+
"data": {
|
158
|
+
"application/vnd.jupyter.widget-view+json": {
|
159
|
+
"model_id": "d6e5c083d0074c7da1413a7b7f990984",
|
160
|
+
"version_major": 2,
|
161
|
+
"version_minor": 0
|
162
|
+
},
|
163
|
+
"text/plain": [
|
164
|
+
"interactive(children=(Text(value='Sam', description='name'), IntSlider(value=7, description='number', max=10, …"
|
165
|
+
]
|
166
|
+
},
|
167
|
+
"metadata": {},
|
168
|
+
"output_type": "display_data"
|
169
|
+
}
|
170
|
+
],
|
171
|
+
"source": [
|
172
|
+
"interact(friends, name='Sam', number=(5, 10));"
|
173
|
+
]
|
174
|
+
},
|
175
|
+
{
|
176
|
+
"cell_type": "markdown",
|
177
|
+
"metadata": {},
|
178
|
+
"source": [
|
179
|
+
"And a dictionary will generate a dropdown menu:"
|
180
|
+
]
|
181
|
+
},
|
182
|
+
{
|
183
|
+
"cell_type": "code",
|
184
|
+
"execution_count": 7,
|
185
|
+
"metadata": {
|
186
|
+
"scrolled": true
|
187
|
+
},
|
188
|
+
"outputs": [
|
189
|
+
{
|
190
|
+
"data": {
|
191
|
+
"application/vnd.jupyter.widget-view+json": {
|
192
|
+
"model_id": "0c32a3f3ad154ba1a3a5639f0d8f1c40",
|
193
|
+
"version_major": 2,
|
194
|
+
"version_minor": 0
|
195
|
+
},
|
196
|
+
"text/plain": [
|
197
|
+
"interactive(children=(Text(value='Sam', description='name'), Dropdown(description='number', options={'One': 1,…"
|
198
|
+
]
|
199
|
+
},
|
200
|
+
"metadata": {},
|
201
|
+
"output_type": "display_data"
|
202
|
+
}
|
203
|
+
],
|
204
|
+
"source": [
|
205
|
+
"interact(friends, name='Sam', number={'One': 1, 'Five': 5, 'Ten': 10});"
|
206
|
+
]
|
207
|
+
},
|
208
|
+
{
|
209
|
+
"cell_type": "markdown",
|
210
|
+
"metadata": {},
|
211
|
+
"source": [
|
212
|
+
"Here's the complete list of each argument type and the widget it generates:\n",
|
213
|
+
"\n",
|
214
|
+
"| Keyword argument | Widget |\n",
|
215
|
+
"| ------- | ------ |\n",
|
216
|
+
"| `True` or `False` | Checkbox |\n",
|
217
|
+
"| `'Hi there'` | Text |\n",
|
218
|
+
"| value or (min,max) or (min,max,step) if integers are passed | IntSlider |\n",
|
219
|
+
"| value or (min,max) or (min,max,step) if floats are passed | FloatSlider |\n",
|
220
|
+
"| `['orange','apple']` or `{'one':1,'two':2}` | Dropdown |\n"
|
221
|
+
]
|
222
|
+
},
|
223
|
+
{
|
224
|
+
"cell_type": "markdown",
|
225
|
+
"metadata": {},
|
226
|
+
"source": [
|
227
|
+
"You may also use the widget classes in `ipywidgets` in the calls to `interact` to have more fine-grained control over the interface. For more details on using `interact`, see the [official `ipywidgets` documentation](http://ipywidgets.readthedocs.io/en/stable/examples/Using%20Interact.html).\n",
|
228
|
+
"\n",
|
229
|
+
"You are now ready to publish your webpage! Proceed to the next page of the tutorial."
|
230
|
+
]
|
231
|
+
}
|
232
|
+
],
|
233
|
+
"metadata": {
|
234
|
+
"kernelspec": {
|
235
|
+
"display_name": "Python 3",
|
236
|
+
"language": "python",
|
237
|
+
"name": "python3"
|
238
|
+
},
|
239
|
+
"language_info": {
|
240
|
+
"codemirror_mode": {
|
241
|
+
"name": "ipython",
|
242
|
+
"version": 3
|
243
|
+
},
|
244
|
+
"file_extension": ".py",
|
245
|
+
"mimetype": "text/x-python",
|
246
|
+
"name": "python",
|
247
|
+
"nbconvert_exporter": "python",
|
248
|
+
"pygments_lexer": "ipython3",
|
249
|
+
"version": "3.7.9"
|
250
|
+
}
|
251
|
+
},
|
252
|
+
"nbformat": 4,
|
253
|
+
"nbformat_minor": 2
|
254
|
+
}
|