j1-template 2022.2.3 → 2022.3.0

data/lib/starter_web/pages/public/jupyter/docs/nbi-widget-manual.adoc

@@ -58,7 +58,7 @@ resource_options:
 :binder-badge-enabled:                            false
 :binder--home:                                    https://mybinder.org/
 :binder--docs:                                    https://mybinder.readthedocs.io/en/latest/
-:binder-app-launch--tree:                         https://mybinder.org/v2/gh/jekyll-one/nbinteract-notebooks/main?urlpath=/tree
+:binder-app-launch--tree:                         https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main?urlpath=/tree
 
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
@@ -103,6 +103,25 @@ hist_function (Array | (*args -> Array int | Array float)):
     histogram.
 ----
 
+.Example
+[source, python, role="noclip"]
+----
+import nbinteract as nbi
+import numpy as np
+
+def hist_response_function(mean, sd, size=1000):
+    '''
+    Returns 1000 values picked at random from the normal
+    distribution with the mean and SD given.
+    '''
+    return np.random.normal(loc=mean, scale=sd, size=1000)
+
+nbi.hist(hist_response_function, mean=(0, 10), sd=(0, 2.0, 0.2))
+----
+
+.Rendered Histogram
+lightbox::nbi-widget--hist[800, {data-nbi-widget--hist}, role="mt-3 mb-4"]
+
 === Options
 
 [source, python, role="noclip"]
@@ -147,6 +166,28 @@ y_fn (Array | (Array, *args -> Array int | Array float)):
     y-axis.
 ----
 
+.Example
+[source, python, role="noclip"]
+----
+import nbinteract as nbi
+import numpy as np
+
+def categories(n):
+    return np.arange(n)
+
+def heights(xs, offset):
+    return xs + offset
+
+opts = {
+    'ylim': (0, 20),
+}
+
+nbi.bar(categories, heights, n=(0, 10), offset=(1, 10), options=opts)
+----
+
+.Rendered Barchart
+lightbox::nbi-widget--bar[800, {data-nbi-widget--bar}, role="mt-3 mb-4"]
+
 === Options
 
 [source, python, role="noclip"]
@@ -168,7 +209,7 @@ interact_params (dict): Keyword arguments in the same format as
 ----
 
 
-== Scatter plot
+== Interactive Scatter plot
 
 The widget `nbinteract.scatter_drag` generates an interactive scatter plot
 with the best fit line plotted over the points. The points can be dragged by
@@ -180,6 +221,23 @@ x_points (Array Number): x-values of points to plot
 y_points (Array Number): y-values of points to plot
 ----
 
+.Example
+[source, python, role="noclip"]
+----
+import nbinteract as nbi
+import numpy as np
+
+x_coords = np.arange(10)
+y_coords = np.arange(10) + np.random.rand(10)
+
+opts = {'xlim': (0, 9), 'ylim': (0, 11), 'animation_duration': 250}
+
+nbi.scatter_drag(x_coords, y_coords, options=opts)
+----
+
+.Rendered interactive Scatter Plot
+lightbox::nbi-widget--scatter-drag[800, {data-nbi-widget--scatter-drag}, role="mt-3 mb-4"]
+
 === Options
 
 [source, python, role="noclip"]
@@ -221,6 +279,21 @@ y_fn (Array | (Array, *args -> Array int | Array float)):
     scatter plot.
 ----
 
+.Example
+[source, python, role="noclip"]
+----
+import nbinteract as nbi
+import numpy as np
+
+def x_values(n): return np.random.choice(100, n)
+def y_values(xs): return np.random.choice(100, len(xs))
+
+nbi.scatter(x_values, y_values, n=(0,200))
+----
+
+.Rendered Scatter Plot
+lightbox::nbi-widget--scatter[800, {data-nbi-widget--scatter}, role="mt-3 mb-4"]
+
 === Options
 
 [source, python, role="noclip"]
@@ -275,6 +348,8 @@ opts = {
 nbi.line(x_values, y_values, max=(10, 50), sd=(1, 10), options=opts)
 ----
 
+.Rendered Line Plot
+lightbox::nbi-widget--line[800, {data-nbi-widget--line}, role="mt-3 mb-4"]
 
 [source, python, role="noclip"]
 ----
@@ -316,3 +391,75 @@ interact_params (dict): Keyword arguments in the same format as
     parameter names, prefix the corresponding kwargs with `x__` and
     `y__`.
 ----
+
+== Multiple Choice
+
+Generates a multiple choice question that allows the user to select an
+answer choice and shows whether choice was correct.
+
+[source, python, role="noclip"]
+----
+nbinteract.multiple_choice(question, choices, answers)
+----
+
+.Example
+[source, python, role="noclip"]
+----
+import nbinteract as nbi
+
+nbi.multiple_choice(question="Select all prime numbers.",
+                    choices=['12', '3', '31'],
+                    answers=[1, 2])
+----
+
+.Rendered Multiple Choice
+lightbox::nbi-widget--multiple-choice[800, {data-nbi-widget--multiple-choice}, role="mt-3 mb-4"]
+
+=== Options
+
+[source, python, role="noclip"]
+----
+question (str): Question text displayed above choices.
+
+choices (list str): Answer choices that user can select.
+
+answers (int | iterable int): Either an integer or iterable of
+    integers. Each integer in answers corresponds to the index of the
+    correct choice in `choices`.
+----
+
+== Short Answer
+
+Generates a short answer question that allows user to input an answer in
+a textbox and a submit button to check the answer.
+
+[source, python, role="noclip"]
+----
+nbinteract.short_answer(question, answers, explanation=None)
+----
+
+.Example
+[source, python, role="noclip"]
+----
+import nbinteract as nbi
+
+nbi.short_answer('What is 1+1?', answers='2', explanation='1+1 is 2')
+----
+
+.Rendered Short Answer
+lightbox::nbi-widget--short-answer[800, {data-nbi-widget--short-answer}, role="mt-3 mb-4"]
+
+=== Options
+
+[source, python, role="noclip"]
+----
+question (str):  The question being asked.
+
+answers (str | list str | func): If a string, only that string will be
+    marked correct. If a list of string, any string in the list will be
+    marked correct. If a function, any input that causes the function
+    to return True will be marked correct.
+
+explanation (str):  The explanation to the question is displayed when
+    the user inputs the correct answer.
+----

data/lib/starter_web/pages/public/jupyter/docs/nbinteract-doc.adoc

@@ -65,7 +65,7 @@ resource_options:
 :binder-badge-enabled:                            false
 :binder--home:                                    https://mybinder.org/
 :binder--docs:                                    https://mybinder.readthedocs.io/en/latest/
-:binder-app-launch--tree:                         https://mybinder.org/v2/gh/jekyll-one/nbinteract-notebooks/main?urlpath=/tree
+:binder-app-launch--tree:                         https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main?urlpath=/tree
 
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------

data/lib/starter_web/pages/public/jupyter/examples/j1-circular-times-table.adoc

@@ -0,0 +1,137 @@
+---
+title:                                  Time Tables
+tagline:                                visualize patterns
+date:                                   2022-03-28 00:00:00
+description: >
+                                        The package nbinteract aims to enable authors and educators to create and
+                                        share interactive web pages easily. Interactive explanations of concepts are
+                                        useful for communicating and explaining tricky concepts.
+keywords: >
+                                        opensource, free, load, download, start, starter, example,
+                                        high, easy, use, secure, encrypt, standard, popular,
+                                        generate, create, learn, distribute, publish, deploy,
+                                        beginner, advanced, expert, student, learner, writer, reader, visitor
+                                        framework, toolkit, integration, extension, module, api,
+                                        dynamic, static, generator, client, server, internet, local, localhost
+                                        page, web, website, webdesign, material, design, responsive,
+                                        javascript, nodejs, ruby, windows, linux, osx, mac, os,
+                                        http, https, html, html5, css, scss, style,
+                                        browser, firefox, chrome, edge, opera, safari,
+                                        configuration, generator, navigation, menu, dropdown, fab, action, button
+                                        application, interface, provider, api, repository,
+                                        cookie, language, translation, gdpr, dsgvo, privacy,
+                                        asciidoc, aciidoctor, bootstrap, jekyll, liquid,
+                                        hyvor, disqus, git, github, netlify, heroku, apple, microsoft,
+                                        provider, service, internet, support,
+                                        google, analytics, advertising, search, console, silverlight, score,
+                                        j1, template, jekyllone, comment,
+                                        python, jupyter, notebook, textbook, api, app, nbinteract,
+                                        nbi, integration, binder, binderhub, jupyterhub
+
+categories:                             [ Software, Python ]
+tags:                                   [ Binder, Jupyter, Notebooks ]
+
+scrollbar:                              false
+fab_menu_id:                            open_toc_reload
+personalization:                        true
+
+permalink:                              /pages/public/jupyter/textbooks/j1-circular-times-table/
+regenerate:                             false
+
+resources:                              [ nbinteract, rouge ]
+resource_options:
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/pages/nbinteract/mandelbrot-menge-1920x1200.jpg
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                                   <attr-value>
+:binder-badges-enabled:                           true
+:binder-app-launch--tree:                         https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main?urlpath=/tree
+:binder-app-launch--notebook:                     https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main?filepath=notebooks/j1/j1_circular_times_table.ipynb
+
+:time-tables-visualization:                       https://elc.github.io/posts/times-tables/
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="global" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// image:/assets/images/badges/myBinder.png[Binder, link="https://mybinder.org/", {browser-window--new}]
+// image:/assets/images/badges/docsBinder.png[Binder, link="https://mybinder.readthedocs.io/en/latest/", {browser-window--new}]
+// See: https://towardsdatascience.com/ordinal-differential-equation-ode-in-python-8dc1de21323b
+
+ifeval::[{binder-badges-enabled} == true]
+image:/assets/images/badges/notebookBinder.png[Binder, link="{binder-app-launch--notebook}", {browser-window--new}]
+image:https://mybinder.org/badge_logo.svg[Binder, link="{binder-app-launch--tree}", {browser-window--new}]
+endif::[]
+
+NOTE: All examples are taken from
+link:{time-tables-visualization}[Time Tables Visualization - Finding Patterns, {browser-window--new}],
+and re-written for the use of module J1 NBI. Some text is used from the
+original post but re-written for clarity and simplicity.
+
+First, let's introduce the video from _Mathologer_. This video creates very
+nice patterns from _Times Tables_. Everybody knows them from primary school.
+It's something like this:
+
+.Table of *Two* (excerpt)
+[cols="6a,6a", options="header", width="100%", role="rtable mt-3"]
+|===
+|Factor |Value
+
+|`1 x 2`
+|2
+
+|`2 x 2`
+|4
+
+|`3 x 2`
+|6
+
+|`4 x 2`
+|8
+
+|===
+
+The idea, in general, is surprisingly simple, but the results are surprising.
+Please go for the video from _Mathologer_ first to catch the idea behind it.
+
+In this document, several scenarios using _Times Tables_ as a base to
+calculate plotted images are presented similar to the approach of
+what _Mathologer_ is doing:
+
+* a static but parametric version: you can change with sliders the values
+  and experiment by yourself.
+* an animated version to construct the image Line by Line: the factor
+  and the number of points is fixed, but each line is plotted per iteration
+* an animated version to construct the image Point by Point: the factor
+  and the lines are fixed, but each iteration increases the number of points
+* an animated version to construct the image Factor by Factor: the lines
+  and the number of points is fixed, but the factor increases per iteration.
+
+WARNING: Each scenario presented on this page uses *time-consuming*
+operations that take a while to finish. The images and the interactive
+elements are built through a backend in the cloud. Please be patient
+to see the results.
+
+Start your journey on the power of Mathematics!
+
+// textbook::circular_times_table[]
+textbook::j1_circular_times_table[]

data/lib/starter_web/pages/public/jupyter/examples/j1-interactive-widgets.adoc

@@ -62,8 +62,8 @@ resource_options:
 // -----------------------------------------------------------------------------
 // :page--attr:                                   <attr-value>
 :binder-badges-enabled:                           true
-:binder-app-launch--tree:                         https://mybinder.org/v2/gh/jekyll-one/nbinteract-notebooks/main?urlpath=/tree
-:binder-app-launch--notebook:                     https://mybinder.org/v2/gh/jekyll-one/nbinteract-notebooks/main?filepath=notebooks/j1/j1_interactive.ipynb
+:binder-app-launch--tree:                         https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main?urlpath=/tree
+:binder-app-launch--notebook:                     https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main?filepath=notebooks/j1/j1_interactive_widgets.ipynb
 
 
 //  Load Liquid procedures

data/lib/starter_web/pages/public/jupyter/examples/j1-odes-in-python.adoc

@@ -1,5 +1,5 @@
 ---
-title:                                  ODEs in Python
+title:                                  ODEs with Python
 tagline:                                interactive evaluation
 date:                                   2022-03-28 00:00:00
 description: >
@@ -57,9 +57,9 @@ resource_options:
 // -----------------------------------------------------------------------------
 // :page--attr:                                   <attr-value>
 :binder-badges-enabled:                           true
-:binder-app-launch--tree:                         https://mybinder.org/v2/gh/jekyll-one/nbinteract-notebooks/main?urlpath=/tree
-:binder-app-launch--notebook:                     https://mybinder.org/v2/gh/jekyll-one/nbinteract-notebooks/main?filepath=notebooks/j1/j1_odes_in_python.ipynb
-
+:binder-app-launch--tree:                         https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main?urlpath=/tree
+:binder-app-launch--notebook:                     https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main?filepath=notebooks/j1/j1_odes_in_python.ipynb
+:odes-in-python:                                  https://elc.github.io/posts/ordinary-differential-equations-with-python/
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
 {% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
@@ -81,7 +81,10 @@ image:https://mybinder.org/badge_logo.svg[Binder, link="{binder-app-launch--tree
 endif::[]
 
 
-== ODEs in Python
+// See: https://elc.github.io/posts/ordinary-differential-equations-with-python/
+
+NOTE: All examples are taken from
+link:{odes-in-python}[Ordinary Differential Equations (ODE) with Python, {browser-window--new}]
 
 An ordinary differential equation (often abbreviated to ODE) is one
 Differential equation where only derivatives of the desired function
@@ -96,4 +99,6 @@ describing the dynamics of the population of rabbits and foxes. Check how
 the animals depend on each other. Manipulate some parameters to see the
 influences on the rabbits and foxes population.
 
-textbook::j1_ode_selected[]
+// textbook::j1_ode_selected[]
+
+textbook::j1_odes_in_python[]

data/lib/starter_web/pages/public/jupyter/examples/j1-testing-plotly.adoc

@@ -0,0 +1,86 @@
+---
+title:                                  Testing Plotly
+tagline:                                interactive evaluation
+date:                                   2022-03-28 00:00:00
+description: >
+                                        The package nbinteract aims to enable authors and educators to create and
+                                        share interactive web pages easily. Interactive explanations of concepts are
+                                        useful for communicating and explaining tricky concepts.
+keywords: >
+                                        opensource, free, load, download, start, starter, example,
+                                        high, easy, use, secure, encrypt, standard, popular,
+                                        generate, create, learn, distribute, publish, deploy,
+                                        beginner, advanced, expert, student, learner, writer, reader, visitor
+                                        framework, toolkit, integration, extension, module, api,
+                                        dynamic, static, generator, client, server, internet, local, localhost
+                                        page, web, website, webdesign, material, design, responsive,
+                                        javascript, nodejs, ruby, windows, linux, osx, mac, os,
+                                        http, https, html, html5, css, scss, style,
+                                        browser, firefox, chrome, edge, opera, safari,
+                                        configuration, generator, navigation, menu, dropdown, fab, action, button
+                                        application, interface, provider, api, repository,
+                                        cookie, language, translation, gdpr, dsgvo, privacy,
+                                        asciidoc, aciidoctor, bootstrap, jekyll, liquid,
+                                        hyvor, disqus, git, github, netlify, heroku, apple, microsoft,
+                                        provider, service, internet, support,
+                                        google, analytics, advertising, search, console, silverlight, score,
+                                        j1, template, jekyllone, comment,
+                                        python, jupyter, notebook, textbook, api, app, nbinteract,
+                                        nbi, integration, binder, binderhub, jupyterhub
+
+categories:                             [ Software, Python ]
+tags:                                   [ Binder, Jupyter, Notebooks ]
+
+scrollbar:                              false
+fab_menu_id:                            open_toc_reload
+personalization:                        true
+
+permalink:                              /pages/public/jupyter/textbooks/j1-testing-plotly/
+regenerate:                             true
+
+resources:                              [ nbinteract, require, rouge ]
+resource_options:
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/modules/attics/runner-1920x1200.jpg
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                                   <attr-value>
+:binder-badges-enabled:                           true
+:binder-app-launch--tree:                         https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main?urlpath=/tree
+:binder-app-launch--notebook:                     https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main?filepath=notebooks/j1/j1_odes_in_python.ipynb
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="global" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// image:/assets/images/badges/myBinder.png[Binder, link="https://mybinder.org/", {browser-window--new}]
+// image:/assets/images/badges/docsBinder.png[Binder, link="https://mybinder.readthedocs.io/en/latest/", {browser-window--new}]
+// See: https://towardsdatascience.com/ordinal-differential-equation-ode-in-python-8dc1de21323b
+
+ifeval::[{binder-badges-enabled} == true]
+image:/assets/images/badges/notebookBinder.png[Binder, link="{binder-app-launch--notebook}", {browser-window--new}]
+image:https://mybinder.org/badge_logo.svg[Binder, link="{binder-app-launch--tree}", {browser-window--new}]
+endif::[]
+
+
+== Plotly
+
+textbook::j1_testing_plotly[]

data/lib/starter_web/pages/public/jupyter/examples/j1_climate-change-forecast.adoc

@@ -58,8 +58,8 @@ resource_options:
 // -----------------------------------------------------------------------------
 // :page--attr:                                   <attr-value>
 :binder-badges-enabled:                           true
-:binder-app-launch--tree:                         https://mybinder.org/v2/gh/jekyll-one/nbinteract-notebooks/main?urlpath=/tree
-:binder-app-launch--notebook:                     https://mybinder.org/v2/gh/jekyll-one/nbinteract-notebooks/main?filepath=notebooks/j1/j1_climate_change_forecast.ipynb
+:binder-app-launch--tree:                         https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main?urlpath=/tree
+:binder-app-launch--notebook:                     https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main?filepath=notebooks/j1/j1_climate_change_forecast.ipynb
 
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------