Merge branch 'main' into 'publish'
Main See merge request interactivetextbooks-citg/jupyter-book-manual!96
|
|
@ -22,6 +22,7 @@ parts:
|
|||
- file: workflows/check_changes_online
|
||||
- file: workflows/merge_request
|
||||
- file: installation-and-setup/organize-team
|
||||
- file: installation-and-setup/creating_content.md
|
||||
- caption: Features
|
||||
chapters:
|
||||
- file: basic-features/overview
|
||||
|
|
@ -64,14 +65,14 @@ parts:
|
|||
- caption: Examples
|
||||
chapters:
|
||||
- file: examples/overview
|
||||
- file: examples/book_structure.md
|
||||
- file: examples/h5p_examples.md
|
||||
- file: examples/live_code.md
|
||||
- file: examples/example_gumbel.ipynb
|
||||
- file: examples/theory_questions.md
|
||||
- file: examples/interactive_templates.md
|
||||
sections:
|
||||
- file: examples/example_gumbel.ipynb
|
||||
- file: examples/example_quiz_interactive.ipynb
|
||||
- file: examples/coding_theory_widgets.ipynb
|
||||
- file: examples/parametric_questions.ipynb
|
||||
- file: examples/example_quiz_interactive.ipynb
|
||||
- file: examples/coding_theory_widgets.ipynb
|
||||
- file: examples/parametric_questions.ipynb
|
||||
|
||||
- caption: Editing tools
|
||||
chapters:
|
||||
|
|
|
|||
57
book/examples/book_structure.md
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
# Well-Structured Book
|
||||
|
||||
One thing that students love is having all practical information about a course collected and updated on one page.
|
||||
No more scrolling through the introduction lecture on Brightspace while veryfing assessment methods on the online studyguide or finding out about the schedule on MyTimetable. As will be shown in the following section, a Jupyter Book can be used to clarify the logistics of a course on top of providing the course material to the students.
|
||||
|
||||
The crossover module Data Science and Artifical Intelligence for Engineers, or in short DSAIE, aims to teach powerful data science tools to 2nd master students from the Civil Engineering and Geosciences faculty. In order to do that they use a combination of practical projects and theory provided to the students through their online interactive [book](https://interactivetextbooks.citg.tudelft.nl/dsaie/intro.html).
|
||||
|
||||
## Table of contents
|
||||
|
||||
```{figure} figures/nice_overview1.PNG
|
||||
---
|
||||
width: 700
|
||||
align: center
|
||||
---
|
||||
DSAIE Overview Page
|
||||
```
|
||||
While the left menu shows the first two chapters in the table of contents (Home & Logistics), the right hand side menu shows the sections of the current chapter where an introduction is given on the different units of the course, the responsible lecturers as well as the schedule of lectures and practicals. Additionally, the book layout is explained to the students which can help clarify how to use the interactive sections!
|
||||
|
||||
The anatomy of a jupyter book is explained more in detail in [this](/jupyter-book-manual/book/basic-features/jupyterbook.md) page. In short, you can create structure in your book by having chapters and subschapters defined in the `.toc` file. In each chapter you can organize the content in sections using the `#` syntax which is visible in the menu on the right.
|
||||
|
||||
## Tagged content
|
||||
|
||||
Since all of this information can get a bit overwhelming it might be useful to tag the content so that students can easily grasp how the course is built up. Clicking on `Assessment` in the contents menu on the right will bring you to the following paragrapgh.
|
||||
|
||||
```{figure} figures/nice_overview2.PNG
|
||||
---
|
||||
width: 700
|
||||
align: center
|
||||
---
|
||||
DSAIE Assessment Methods + Tags
|
||||
```
|
||||
The lecturers have introduced some tags such as `written-exam` and `group-assignment`. Likewise, the reading material is also tagged with different sources so that students know in which textbook they can find more information if interested.
|
||||
|
||||
Throughout the book, those tags might be integrated as follows:
|
||||
|
||||
```{figure} figures/nice_overview4.PNG
|
||||
---
|
||||
width: 700
|
||||
align: center
|
||||
---
|
||||
Additional reading reference
|
||||
```
|
||||
|
||||
+++
|
||||
{bdg-primary}`my_new_tag`
|
||||
|
||||
|
||||
Make your own!
|
||||
|
||||
```
|
||||
+++
|
||||
{bdg-primary}`your_new_tag`
|
||||
```
|
||||
|
||||
These badges as they are called are provided by the `spinx-design extension`. Different colours can be found through a bit of research online or [here](https://github.com/executablebooks/sphinx-design/blob/main/docs/badges_buttons.md) as a starting point.
|
||||
|
||||
|
||||
|
|
@ -4,9 +4,9 @@
|
|||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"# Combining coding theory with interactive questions and potential live coding\n",
|
||||
"# Coding theory, interactive quizzes & live code\n",
|
||||
"\n",
|
||||
"This page shows an example of how to combine the introduction of a certain coding implementation with interactive questions. Automatic executation of the thebe live coding has been enables and the download button has been replaced by a custom notebook file."
|
||||
"This page shows an example on how to combine the introduction of a certain coding implementation with interactive questions. Compared to the previous template, the learning objective is to learn a new skill in programming using the live coding feature whereas before programming was used to illustrate a theoretic concept unrelated to coding (for example statistics)."
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -8,7 +8,11 @@
|
|||
"source": [
|
||||
"# Programming assignment\n",
|
||||
"\n",
|
||||
"This page shows how you can convert the classical Jupyter Notebook assignment to a jupyter book format with live coding. A widget has been implemented to check the answers, of which the data is included in a separate python file. The page automatically loads and a custom download page has been added\n",
|
||||
"This page shows how you can recreate the classical Jupyter Notebook assignments that are given in many courses to a Jupyter Book format with live coding. A widget has been implemented to check the answers, of which the data is included in a separate python file. The page automatically loads and a custom download page has been added\n",
|
||||
"\n",
|
||||
"```{Note}\n",
|
||||
"Keep in mind that Jupyter Book sections might not be the best environment for programming assignments you have in mind for your course due to the limitation posed by jupyter book. In fact, in jupyter book, python runs in the browser of the students' laptop. Nothing needs to be installed which can be an advantage but also a disadvantage depending on the learning goals of your course. TeachBooks suggests using it's live coding feature to support the theory in textbooks and not as a replacement for Jupyter Notebook.\n",
|
||||
"```\n",
|
||||
"\n",
|
||||
"```{custom_download_link} ./example_gumbel_stripped.ipynb\n",
|
||||
":replace_default: \"True\"\n",
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"# Combining theory with interactive questions and extensive coding assignment\n",
|
||||
"# Theory, interactive quizzes & live code\n",
|
||||
"\n",
|
||||
"This page shows an example of how to combine theory, quizzes and code on one page. With headings and boxes, the interactive parts can be indicated (for now only if part of one cell). Automatic execution has been activated and a custom ipynb.file has replaced the download button.\n",
|
||||
"\n",
|
||||
"```{custom_download_link} ./example_quiz_interactive_stripped.ipynb\n",
|
||||
|
|
|
|||
BIN
book/examples/figures/Live_code.PNG
Normal file
|
After Width: | Height: | Size: 38 KiB |
BIN
book/examples/figures/Live_code2.PNG
Normal file
|
After Width: | Height: | Size: 53 KiB |
BIN
book/examples/figures/Question_set_1.PNG
Normal file
|
After Width: | Height: | Size: 33 KiB |
BIN
book/examples/figures/Question_set_2.PNG
Normal file
|
After Width: | Height: | Size: 62 KiB |
BIN
book/examples/figures/Question_set_3.PNG
Normal file
|
After Width: | Height: | Size: 58 KiB |
BIN
book/examples/figures/Question_set_4.PNG
Normal file
|
After Width: | Height: | Size: 31 KiB |
BIN
book/examples/figures/blanks1.PNG
Normal file
|
After Width: | Height: | Size: 46 KiB |
BIN
book/examples/figures/blanks2.PNG
Normal file
|
After Width: | Height: | Size: 35 KiB |
BIN
book/examples/figures/blanks3.PNG
Normal file
|
After Width: | Height: | Size: 23 KiB |
BIN
book/examples/figures/cards1.PNG
Normal file
|
After Width: | Height: | Size: 38 KiB |
BIN
book/examples/figures/drag1.PNG
Normal file
|
After Width: | Height: | Size: 43 KiB |
BIN
book/examples/figures/drag2.PNG
Normal file
|
After Width: | Height: | Size: 33 KiB |
BIN
book/examples/figures/live_code3.PNG
Normal file
|
After Width: | Height: | Size: 50 KiB |
BIN
book/examples/figures/live_code4.PNG
Normal file
|
After Width: | Height: | Size: 57 KiB |
BIN
book/examples/figures/live_code5.PNG
Normal file
|
After Width: | Height: | Size: 58 KiB |
BIN
book/examples/figures/live_code6.PNG
Normal file
|
After Width: | Height: | Size: 54 KiB |
BIN
book/examples/figures/live_code7.PNG
Normal file
|
After Width: | Height: | Size: 68 KiB |
BIN
book/examples/figures/nice_overview1.PNG
Normal file
|
After Width: | Height: | Size: 121 KiB |
BIN
book/examples/figures/nice_overview2.PNG
Normal file
|
After Width: | Height: | Size: 131 KiB |
BIN
book/examples/figures/nice_overview3.PNG
Normal file
|
After Width: | Height: | Size: 144 KiB |
BIN
book/examples/figures/nice_overview4.PNG
Normal file
|
After Width: | Height: | Size: 69 KiB |
BIN
book/examples/figures/truefalse0.PNG
Normal file
|
After Width: | Height: | Size: 62 KiB |
BIN
book/examples/figures/truefalse1.PNG
Normal file
|
After Width: | Height: | Size: 23 KiB |
|
|
@ -1,23 +1,191 @@
|
|||
# H5p
|
||||
# Types of H5p Quizzes
|
||||
|
||||
This page shows some examples of H5p questions.
|
||||
This page will show some examples of H5p quizzes built into a variety of TeachBooks to allow the students to test their understanding of the content as they read. H5p quizzes can be used to create a set of Multiple Choice, Drag and Drop, Fill in the blanks, True/False and Image choice questions so the applications are quite versitile and your imagination can be used in creating the questions.
|
||||
|
||||
## Getting started with H5p
|
||||
|
||||
Some best-practices on the use of H5p:
|
||||
- To startup your H5p-account, first login to H5p via Brightspace (follow instructions as under [https://www.tudelft.nl/teaching-support/educational-tools/h5p](https://www.tudelft.nl/teaching-support/educational-tools/h5p)). After that, direct login is possible via [tudelft.h5p.com](tudelft.h5p.com)
|
||||
- Place your H5p-elements in a shared folder in H5p.
|
||||
- Disable the display options "Toolbar Below Content" and "Display author's name to public (anonymous users) (only relevant when content's status is set to Public )" for each
|
||||
|
||||
## Complex fill in the blanks
|
||||
This can be used to evaluate numerical answers:
|
||||
<iframe src="https://tudelft.h5p.com/content/1292010272694757307/embed" aria-label="Example MUDE" width="1088" height="637" frameborder="0" allowfullscreen="allowfullscreen" allow="autoplay *; geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe><script src="https://tudelft.h5p.com/js/h5p-resizer.js" charset="UTF-8"></script>
|
||||
|
||||
## Dialog cards
|
||||
This can be used to ask open questions:
|
||||
|
||||
Dialog cards can be used to ask open questions about the content students are reading or, more intrestingly, to check the conclusion the students draw from the interactive exercises built into the book.
|
||||
|
||||
**Engineering Systems Optimization**
|
||||
|
||||
A great example of this can be found in the book: Engineering Systems Optimization. [Chapter 4](https://teachbooks.github.io/engineering-systems-optimization/2023/pages/moo_example.html) called Mulit-objective optimization has an in depth sub-chapter which is used to compare the relation between engine power and emissions and how to optimize for both.
|
||||
|
||||
```{figure} figures/Live_code.PNG
|
||||
---
|
||||
width: 600
|
||||
align: center
|
||||
---
|
||||
Problem Statement
|
||||
```
|
||||
|
||||
As can be seen on the right-hand-side menu, the sub-chapter includes the problem statement, the elaboration on the model and solution method and finally an exercise for the student. The code in the page is activated by pressing the live code button which will make the code cells editable and executable. Additionally, interactive figures are included into the text with movable sliders to directly see the effect of the changes made.
|
||||
|
||||
```{figure} figures/Live_code2.PNG
|
||||
---
|
||||
width: 600
|
||||
align: center
|
||||
---
|
||||
Interactive Graph
|
||||
```
|
||||
|
||||
The H5p quizzes can shine in the section on questions, discussions and comments. Next to many multiple choice questions (which are discussed later) there are dialog cards which can ask more conceptual and open ended questions. Pressing on the blue button `Turn` will flip around the card and reveal the model answer. The great thing about the integration of both interactive aspects (coding and questions) helps the student to play around with the code and understand the topic from a less theoretical point-of-view.
|
||||
|
||||
```{figure} figures/cards1.PNG
|
||||
---
|
||||
width: 700
|
||||
align: center
|
||||
---
|
||||
Dialoge Card
|
||||
```
|
||||
|
||||
**Try it out!**
|
||||
|
||||
<iframe src="https://tudelft.h5p.com/content/1292050206829217497/embed" aria-label="PA1 File Contents" width="1088" height="637" frameborder="0" allowfullscreen="allowfullscreen" allow="autoplay *; geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe><script src="https://tudelft.h5p.com/js/h5p-resizer.js" charset="UTF-8"></script>
|
||||
|
||||
## Question set
|
||||
This can be used to create a set of Multiple Choice, Drag and Drop, Fill in the blanks, True/False questions and Image choice questions:
|
||||
## Question Set
|
||||
|
||||
Question sets consist of a question and one or more possible answers to that question.
|
||||
|
||||
**MUDE - Observation Theory**
|
||||
|
||||
The following question sets are taken from chapter 3.3. Weighted least-squares estimation of the MUDE 23/24 book. The chapter builds on the previous chapter on simple least-squares estimation and dwelves into the importance and properties of the weight matrix. The student is primarily quizzed using multiple choice questions to check their understanding. The answers can be provided in the shape of text, figures, equations, matrices and probably much more.
|
||||
|
||||
```{figure} figures/Question_set_1.PNG
|
||||
---
|
||||
width: 600
|
||||
align: center
|
||||
---
|
||||
Text Answers
|
||||
```
|
||||
|
||||
```{figure} figures/Question_set_2.PNG
|
||||
---
|
||||
width: 600
|
||||
align: center
|
||||
---
|
||||
Equations Answers
|
||||
```
|
||||
|
||||
Since these questions are meant to develop the understanding of the students, feedback is vital! Feedback can be built into the questions to explain the reasoning behind a correct answer.
|
||||
|
||||
```{figure} figures/Question_set_3.PNG
|
||||
---
|
||||
width: 600
|
||||
align: center
|
||||
---
|
||||
Correct Answer Feedback
|
||||
```
|
||||
And when the answer is not correct, tips can be given to nudge the student towards the right solution.
|
||||
|
||||
```{figure} figures/Question_set_4.PNG
|
||||
---
|
||||
width: 600
|
||||
align: center
|
||||
---
|
||||
Tips
|
||||
```
|
||||
**Try it out!**
|
||||
|
||||
Have a look at the following 7 questions.
|
||||
|
||||
<iframe src="https://tudelft.h5p.com/content/1292062157562749767/embed" aria-label="quiz_uniform_motion" width="1088" height="637" frameborder="0" allowfullscreen="allowfullscreen" allow="autoplay *; geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe><script src="https://tudelft.h5p.com/js/h5p-resizer.js" charset="UTF-8"></script>
|
||||
|
||||
## True/False Question
|
||||
<iframe src="https://tudelft.h5p.com/content/1292061623388939257/embed" aria-label="quiz_blue_vs_LS" width="1088" height="637" frameborder="0" allowfullscreen="allowfullscreen" allow="autoplay *; geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe><script src="https://tudelft.h5p.com/js/h5p-resizer.js" charset="UTF-8"></script>
|
||||
## Complex fill in the blanks
|
||||
|
||||
The complex fill in the blanks can be used to evaluate numerical answers.
|
||||
|
||||
**MUDE - Observation Theory**
|
||||
|
||||
Chapter 3.7. Non-linear least-squares estimation from the MUDE 23/24 book makes use of the complex fill in the blanks quiz in order to check that the students understood the composition of the Jacobian Matrix specifically used in deriving the linearized functional model. This model is essential for accurately estimating values and assessing system behavior of complex processes that arent linear.
|
||||
|
||||
```{figure} figures/blanks1.PNG
|
||||
---
|
||||
width: 600
|
||||
align: center
|
||||
---
|
||||
Answer Boxes
|
||||
```
|
||||
As you can see, the precision of the answer sought for is specified and the figure below shows again the incorporation of feedback.
|
||||
|
||||
```{figure} figures/blanks2.PNG
|
||||
---
|
||||
width: 600
|
||||
align: center
|
||||
---
|
||||
Wrong Answer + Feedback
|
||||
```
|
||||
|
||||
**MUDE - Optimization**
|
||||
|
||||
Since the cells can be used to evaluate numerical answers, they are an easy way to quiz the student on matrices and evaluate the result of each position indidependently. The optimization team of MUDE took this a step further and used this set-up to quiz the students on the SIMPLEX method. This method automates the solving of the augmented form of a linear programing problem with continuous variables. It makes use of tables and the manipulation of equations to find the optimal vaues. Unfortunately, with a large number of variables this tables tend to get quite big and filling in the cells becomes laborous.
|
||||
|
||||
```{figure} figures/blanks3.PNG
|
||||
---
|
||||
width: 600
|
||||
align: center
|
||||
---
|
||||
SIMPLEX Method
|
||||
```
|
||||
**Try it out!**
|
||||
|
||||
<iframe src="https://tudelft.h5p.com/content/1292010272694757307/embed" aria-label="Example MUDE" width="1088" height="637" frameborder="0" allowfullscreen="allowfullscreen" allow="autoplay *; geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe><script src="https://tudelft.h5p.com/js/h5p-resizer.js" charset="UTF-8"></script>
|
||||
|
||||
## True or False
|
||||
|
||||
This next type of quiz is fairly self explainatory :)
|
||||
|
||||
**MUDE - Optimization**
|
||||
|
||||
Once again the chapter on [optimization](https://mude.citg.tudelft.nl/book/optimization/sand_and_clay.html#lp-formulation-of-the-problem) in the MUDE book integrated many true and false questions to test the students on the problem statement which, like in many engineering problems, is just as important if not more important than the solution procedure. This is especially when the case when small tweaks to the equations, such as seen in the figure below, can change the result of the optimization drastically.
|
||||
|
||||
```{figure} figures/truefalse0.PNG
|
||||
---
|
||||
width: 600
|
||||
align: center
|
||||
---
|
||||
Problem Statement
|
||||
```
|
||||
|
||||
```{figure} figures/truefalse1.PNG
|
||||
---
|
||||
width: 600
|
||||
align: center
|
||||
---
|
||||
True or False
|
||||
```
|
||||
The small circles below the question indicates that there are more questions in this series which can be viewed by clicking on the blue arrow pointing towards the left or right.
|
||||
|
||||
**Try it out!**
|
||||
|
||||
<iframe src="https://tudelft.h5p.com/content/1292061623388939257/embed" aria-label="quiz_blue_vs_LS" width="1088" height="637" frameborder="0" allowfullscreen="allowfullscreen" allow="autoplay *; geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe><script src="https://tudelft.h5p.com/js/h5p-resizer.js" charset="UTF-8"></script>
|
||||
|
||||
## Drag and Drop
|
||||
|
||||
Drag and Drop questions are useful to make the distinction between different concepts that might often cause confusion.
|
||||
|
||||
**MUDE - Optimization**
|
||||
|
||||
In this chapter, it was important that the students made the distinction between the terminology and mathematical meaning between different elements of the graphical solution method. A drag and drop question was used to link the term to its definition. The answer boxes can be dragged to the correct title in a playful manner.jup
|
||||
|
||||
```{figure} figures/drag1.PNG
|
||||
---
|
||||
width: 600
|
||||
align: center
|
||||
---
|
||||
Drag and Drop
|
||||
```
|
||||
|
||||
```{figure} figures/drag2.PNG
|
||||
---
|
||||
width: 600
|
||||
align: center
|
||||
---
|
||||
Solution
|
||||
```
|
||||
|
|
@ -1,16 +1,32 @@
|
|||
# Templates for interactive coding / non-coding elements
|
||||
# Templates for interactive coding and non-coding elements
|
||||
|
||||
These pages show examples of how to use interactive coding / non-coding elements in a Jupyter Book.
|
||||
Lastly some example pages are shown which combine theory and interactive questions and coding to different degrees. The following templates are given:
|
||||
|
||||
1. [Programming Assignments](example_gumbel.ipynb)
|
||||
|
||||
This page shows how you can recreate the classical Jupyter Notebook assignments that are given in many courses to a Jupyter Book format with live coding.
|
||||
|
||||
```{Note}
|
||||
Keep in mind that Jupyter Book sections might not be the best environment for programming assignments you have in mind for your course due to the limitation posed by jupyter book. In fact, in jupyter book, python runs in the browser of the students' laptop. Nothing needs to be installed which can be an advantage but also a disadvantage depending on the learning goals of your course. TeachBooks suggests using it's live coding feature to support the theory in textbooks and not as a replacement for Jupyter Notebook.
|
||||
```
|
||||
|
||||
2. [Combining theory with interactive questions and extensive coding assignments](example_quiz_interactive.ipynb)
|
||||
|
||||
This page shows an example on how to combine theory, quizzes and live code on one page.
|
||||
|
||||
3. [Combining coding theory with interactive questions and live coding](coding_theory_widgets.ipynb)
|
||||
|
||||
This page shows an example on how to combine the introduction of a certain coding implementation with interactive questions. Compared to the previous template, the learning objective is to learn a new skill in programming using the live coding feature whereas before programming was used to illustrate a theoretic concept unrelated to coding (for example statistics).
|
||||
|
||||
4. [Parametric Question](parametric_questions.ipynb)
|
||||
|
||||
On this page, an example is given for parametric questions in which an equation is checked on equivalence with the correct answer.
|
||||
|
||||
These templates make use of the following applications in various combinations:
|
||||
|
||||
You can make use of:
|
||||
- Admonitions
|
||||
- JupyterQuiz
|
||||
- H5p
|
||||
- Grasple-exercises
|
||||
- Interactive widgets
|
||||
- Live coding exercise checking with widgets
|
||||
- Any combination of the above
|
||||
|
||||
The following templates are given:
|
||||
```{tableofcontents}
|
||||
```
|
||||
- Live coding exercise checking with widgets
|
||||
77
book/examples/live_code.md
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
# Live Code (Sphinx Thebe)
|
||||
|
||||
The live-coding option is what makes working with these interactive textbooks extra attractive for courses where coding might be involved or useful to showcase examples. Additionally, it is useful to illustrate the content in a way which the student will recognize during programming assignments.
|
||||
|
||||
This page will show some examples where live coding is used in combination with theoretical questions as well as as stand-alone exercises used to round off a theoretcal chapter with a practical application.
|
||||
|
||||
## Python for Engineers
|
||||
|
||||
[Python for engineers](https://teachbooks.github.io/learn-python/intro.html) is a book used to introduce basic programming concepts to students coming from different universities where programming is not a big part of the curriculum like at TU Delft. The students are encouraged to follow the course online before the start of the year to hit the ground running in September. Chapter 7 introduces the students to [Matplotlib](https://teachbooks.github.io/learn-python/07/Theory/01.html) and teaches them various ways of making a graph.
|
||||
|
||||
Live coding is the perfect learning tool as the students can see how the code relates to the visual result of the graph. subsequently, they can adapt the code and observe the changes. Let's have a look at the implementation.
|
||||
|
||||
```{figure} figures/live_code3.PNG
|
||||
---
|
||||
width: 600
|
||||
align: center
|
||||
---
|
||||
Rocket Button
|
||||
```
|
||||
To activate the live coding, the rocket button has to be activated like in the figure above. It's always useful to point this out in the beginning of the chapter because it might not be obvious to new users. Here's a not eused in the MUDE book
|
||||
|
||||
```{Interactive Pages—Use Python in your Browser!}
|
||||
This online textbook has a number of pages that are set up to be used interactively. You can use the “Live Code” button under the Rocket Ship icon in the top right to activate the interactive features and use Python interactively!
|
||||
|
||||
Sometimes the interactivity will involve completing an exercise, wheras on other pages it might simply provide the opportunity to edit the contents of code cells and execute it to explore the page contents interactively. Other pages may provide interactive figures (e.g., widgets).
|
||||
|
||||
This feature is supported by TeachBooks.
|
||||
```
|
||||
Once the live coding is activated the code cells run the python code. They even display error messages if there is a mistake in the code.
|
||||
|
||||
```{figure} figures/live_code4.PNG
|
||||
---
|
||||
width: 600
|
||||
align: center
|
||||
---
|
||||
Python Ready
|
||||
```
|
||||
After introducing some types of plots and breaking down and explaining the lines of code, it is time for the student to have little go themselves. The code is given and they can customize the input.
|
||||
|
||||
```{figure} figures/live_code5.PNG
|
||||
---
|
||||
width: 600
|
||||
align: center
|
||||
---
|
||||
Graph Customization
|
||||
```
|
||||
This example is rather basic but a similar concept can be applied to more difficult concepts in engineering. The student is getting direct feedback from the code to see how a different input changes the output which reinforces the theory.
|
||||
|
||||
## MUDE - Signal Processing
|
||||
|
||||
In MUDE, the concept of [Signal Processing](https://mude.citg.tudelft.nl/book/signal/intro.html) is introduced. On top of the theory, a working example is used to test the understanding of the students. When talking about Signal Processing, the Fourier Series is a foundational block that has to be well understood. The fourier series is used to describe basically any periodic function/signal as a sum of multiple cosines and sines with different frequencies. This is illustrated with the concept of the [square wave](https://mude.citg.tudelft.nl/book/signal/fourier_nb.html#).
|
||||
|
||||
```{figure} figures/live_code6.PNG
|
||||
---
|
||||
width: 600
|
||||
align: center
|
||||
---
|
||||
Superposition of two signals
|
||||
```
|
||||
By adding more signals themselves, the students will see that the fourier series approximates the square wave. They might even see which frequencies work better than others.
|
||||
|
||||
Finally lets look at a more computationally heavy example.
|
||||
|
||||
## MUDE - Machine Learning
|
||||
|
||||
In the chapter on the [k-nearest neighbour](https://mude.citg.tudelft.nl/book/ml/knn_interactive.html), live-coding is activated by default in order to run all the coding which supports the theory. For more complex topics, it is useful to keep the actual code cells hidden and only display the graphs with interactive sliders in order to focus the learning objective more on the content and less on the coding.
|
||||
|
||||
The k-nearest neighbour method predicts the value *f(x)* for a given *x* by taking the average value of its neigbhours and assigning it to *f(x)*. The amount of neighbours considered is governed by the variable *k*.
|
||||
|
||||
```{figure} figures/live_code7.PNG
|
||||
---
|
||||
width: 600
|
||||
align: center
|
||||
---
|
||||
Interactive Graph
|
||||
```
|
||||
Multiple sliders modify the predicted graph (in orange) by taking into account a different amount of neighbours, training size, frequency of the signal and amount of noise. The student is able to verify the claims made by the theory throught the interactive graph.
|
||||
|
|
@ -1,12 +1,7 @@
|
|||
# Overview
|
||||
|
||||
This chapter includes examples for jupyter book pages with features. Here is an overview of the different examples:
|
||||
This chapter will showcase some TeachBooks making great use of Jupyter Book and TeachBooks features. They can serve as an inspiring starting point for structuring your own TeachBook or just to get an idea of how other teachers and students are using it. Lastly some example pages are shown which combine theory and interactive questions and coding to different degrees.
|
||||
|
||||
|
||||
|
||||
- H5p: examples of H5p questions
|
||||
- Combining theory with interactive questions
|
||||
- Templates for interactive coding / non-coding elements:
|
||||
- Programming assignment: Example of how to convert a Jupyter notebook to Jupyter Book with live coding
|
||||
- Combining theory with interactive questions and extensive coding assignment: Example how to combine theory, quizzes and code on one page
|
||||
- Combining theory with interactive questions: Example how to combine theory with questions, so there's no coding involved.
|
||||
- Parametric question: Example for an equation to be checked on equivalence with the correct answer
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"# Parametric question\n",
|
||||
"# Parametric questions\n",
|
||||
"\n",
|
||||
"On this page an example is given for parametric questions, in which an equation is checked on equivalence with the correct answer."
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Combining theory with interactive questions
|
||||
# Combining theory & interactive quizzes
|
||||
|
||||
This page shows you how to combine theory with questions, so there's no coding involved.
|
||||
This page shows you how to combine theory with questions so there is no coding involved.
|
||||
|
||||
```{index} Truss structures
|
||||
```
|
||||
|
|
|
|||
40
book/installation-and-setup/creating_content.md
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
# Creating Content
|
||||
|
||||
The previous sections have familiarized you with the necessary software for your user type, the basics of Git, and how to collaborate with your team using Git. TeachBooks provides a [template](https://teachbooks.tudelft.nl/jupyter-book-manual/external/template/README.html) you can use to create your book on GitHub, ensuring that your repository contains all the files you may need. Now it's time to create your own content. This section will provide an overview of these components and help you get started on your content.
|
||||
|
||||
```{Important}
|
||||
Please ensure you respect copy right laws when creating and including content! Don't forget to go through our checklist.
|
||||
```
|
||||
|
||||
# Checklist - Copy Right
|
||||
|
||||
Although the focus of TeachBooks is mostly to help the teaching staff create interactive textbooks for their students, it can be attractive to spread ones wings a bit and reach a wider audience. The following section will be all about what you have to keep in mind in terms of copy right and what you should know to avoid major legal issues and make your life easier later on when/if you decide to publish your book with an open license, especially via TU Delft Open. For more information you can find everything on the [TU Delft website](https://www.tudelft.nl/library/support/copyright)
|
||||
|
||||
|
||||
1) Your own new content
|
||||
|
||||
If you have created the content yourself, you are allowed to use it if there are no other agreements in place
|
||||
|
||||
2) Somebody else's content
|
||||
|
||||
If you want to re-use someone else’s work, you need to ask for permission. When you ask for permission please do it in a written format and let the copyright holders know that you are going to use their work in an open licensed work. If they give you permission, exclude the work from the open licensed conditions applicability, by stating that in the attribution/footnote/caption. Exclude it as well in the colophon of the work. If you have asked for permission and you received no answer back, please consider it as a negative response and abstain using the work you were intended to.
|
||||
|
||||
If you really need to re-use someone else’s work, please alsio check whether the copyright exception right to quote is applicable to you.
|
||||
|
||||
More info: [Citations](https://www.tudelft.nl/library/support/copyright/researcher-copyright-answers#c1131017) , [Use copyrighted multimedia](https://www.tudelft.nl/library/support/copyright/researcher-copyright-answers#c1131031) , [Use copyrighted text](https://www.tudelft.nl/library/support/copyright/researcher-copyright-answers#c1131032)
|
||||
|
||||
|
||||
3) Your own old content
|
||||
|
||||
Always attribute the works that are not created by you. Even if created by you, you need to attribute yourself in order to avoid self-plagiarism. Read how to [here](https://www.tudelft.nl/library/support/copyright/researcher-copyright-answers#c1131032)
|
||||
|
||||
Even if you have created the work yourself but years ago, please check whether you have the right to re-use it. If you have created it while you were under the employment of your previous employer, then you will need to ask permission from them.
|
||||
|
||||
4) Open licensed work
|
||||
|
||||
If you want to re-use someone else’s work, please check whether you can find an open licensed work, which can replace the work you wanted to re-use in the first place. More info: [Open licensed work platforms](https://www.tudelft.nl/library/collecties/open-educational-resources)
|
||||
|
||||
If you use open licensed work, you need to attribute the license under which the work is licensed and you need to check the compatibility of the licenses. This means you need to check the license that the work you want to reuse has and the license that your TeachBook will be licensed with. More info [here](https://wiki.creativecommons.org/wiki/Wiki/cc_license_compatibility)
|
||||
|
||||
When you want to adapt previously published work you need to ask permission for it. Otherwise please check whether you can find an open licensed work that you can adapt if their license it permits it.
|
||||
|
||||
65
book/installation-and-setup/creating_content_backup.md
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
|
||||
```{Notes Robert}
|
||||
|
||||
- the creating content page can be more like an overview/jumping off point (for example, it can point out that a book is 3 things: toc+config+content), then link to existing JB manual, example books, etc, but have a really big colorful box that warns about copyright
|
||||
- on this main page it would be important to have a checklist for "what to do when starting a book" that includes choosing a license and how to avoid copyright issues, with links to supbages
|
||||
- creating content subpages:
|
||||
open source licenses: a short overview of types, pointing out that some are oriented on creative work, others on software. mostly pointing out we don't know the right answer but listing examples of what others have done so far
|
||||
copyright page (this is where paschalis' bullet points should go)
|
||||
|
||||
```
|
||||
|
||||
# Creating Content
|
||||
|
||||
The previous sections have familiarized you with the necessary software for your user type, the basics of Git, and how to collaborate with your team using Git. TeachBooks provides a [template](https://teachbooks.tudelft.nl/jupyter-book-manual/external/template/README.html) you can use to create your book on GitHub, ensuring that your repository contains all the files you may need. Now it's time to create your own content. This section will provide an overview of these components and help you get started on your content.
|
||||
|
||||
# Building Blocks
|
||||
|
||||
Creating content for your Jupyter Book involves assembling several key components: the table of contents (`_toc.yml`), the configuration settings (`_config.yml`) and the actual content.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
## Configuration
|
||||
|
||||
## Content
|
||||
|
||||
```{Important}
|
||||
Please ensure you respect copy right laws when creating and including content! Don't forget to go through our checklist.
|
||||
```
|
||||
|
||||
Markdown Files: Write your content in Markdown (.md) files. Markdown is a lightweight markup language with plain text formatting syntax.
|
||||
Chapters and Sections: Organize your content into chapters and sections, with each chapter being a separate Markdown file.
|
||||
|
||||
|
||||
# Checklist - Copy Right
|
||||
|
||||
Although the focus of TeachBooks is mostly to help the teaching staff create interactive textbooks for their students, it can be attractive to spread ones wings a bit and reach a wider audience. The following section will be all about what you have to keep in mind in terms of copy right and what you should know to avoid major legal issues and make your life easier later on when/if you decide to publish your book with an open license, especially via TU Delft Open. For more information you can find everything on the [TU Delft website](https://www.tudelft.nl/library/support/copyright)
|
||||
|
||||
|
||||
1) Your own new content
|
||||
|
||||
If you have created the content yourself, you are allowed to use it if there are no other agreements in place
|
||||
|
||||
2) Somebody else's content
|
||||
|
||||
If you want to re-use someone else’s work, you need to ask for permission. When you ask for permission please do it in a written format and let the copyright holders know that you are going to use their work in an open licensed work. If they give you permission, exclude the work from the open licensed conditions applicability, by stating that in the attribution/footnote/caption. Exclude it as well in the colophon of the work. If you have asked for permission and you received no answer back, please consider it as a negative response and abstain using the work you were intended to.
|
||||
|
||||
If you really need to re-use someone else’s work, please alsio check whether the copyright exception right to quote is applicable to you.
|
||||
|
||||
More info: [Citations](https://www.tudelft.nl/library/support/copyright/researcher-copyright-answers#c1131017) , [Use copyrighted multimedia](https://www.tudelft.nl/library/support/copyright/researcher-copyright-answers#c1131031) , [Use copyrighted text](https://www.tudelft.nl/library/support/copyright/researcher-copyright-answers#c1131032)
|
||||
|
||||
|
||||
3) Your own old content
|
||||
|
||||
Always attribute the works that are not created by you. Even if created by you, you need to attribute yourself in order to avoid self-plagiarism. Read how to [here](https://www.tudelft.nl/library/support/copyright/researcher-copyright-answers#c1131032)
|
||||
|
||||
Even if you have created the work yourself but years ago, please check whether you have the right to re-use it. If you have created it while you were under the employment of your previous employer, then you will need to ask permission from them.
|
||||
|
||||
4) Open licensed work
|
||||
|
||||
If you want to re-use someone else’s work, please check whether you can find an open licensed work, which can replace the work you wanted to re-use in the first place. More info: [Open licensed work platforms](https://www.tudelft.nl/library/collecties/open-educational-resources)
|
||||
|
||||
If you use open licensed work, you need to attribute the license under which the work is licensed and you need to check the compatibility of the licenses. This means you need to check the license that the work you want to reuse has and the license that your TeachBook will be licensed with. More info [here](https://wiki.creativecommons.org/wiki/Wiki/cc_license_compatibility)
|
||||
|
||||
When you want to adapt previously published work you need to ask permission for it. Otherwise please check whether you can find an open licensed work that you can adapt if their license it permits it.
|
||||
|
||||