update

book/_toc.yml

@@ -65,8 +65,9 @@ parts:
   - caption: Examples
     chapters:
     - file: examples/overview
-    - file: examples/book_overview.md
+    - file: examples/book_structure.md
     - file: examples/h5p_examples.md
+    - file: examples/live_code.md
     - file: examples/theory_questions.md
     - file: examples/interactive_templates.md
       sections:

book/examples/book_overview.md

@@ -1,58 +0,0 @@
-# Well-structured Overview
-
-In this section some nice examples for ther overview of your book are covered. You might not judge a book by its cover but perhaps by its introduction:)
-
-One thing students love is having all practical information about a course collected and updated on one page. <br>
-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.
-
-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). Let's have a look at it.
-
-## Logistics
-
-```{figure} figures/nice_overview1.PNG
----
-width: 650
-name: nice_overview1
-align: center
-figclass: "margin"
----
-DSAIE Overview Page
-```
-While the left menu shows the first two chapters of the table of contents, the right hand side menu shows the contents of the current page which in this case is called `Home` where an introduction is given on the different units of the course, the responsible lecturers and the schedule. Additionally the book layout is explained to the students which can help clarify hot to use the interactive sections. 
-
-## Tagged content
-
-Clicking on `Assessment` in the contents menu will bring you to the corresponding paragrapgh. 
-
-```{figure} figures/nice_overview2.PNG
----
-width: 650
-name: nice_overview1
-align: center
-figclass: "margin"
----
-DSAIE Assessment methods + Tags
-```
-Logically, the assessment of the course are explained in a concise manner. Additionally, 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 student sknow where they can find more information.
-
-Throughout the book, those tags might be used as follows:
-
-```{figure} figures/nice_overview4.PNG
----
-width: 650
-name: nice_overview1
-align: center
-figclass: "margin"
----
-Additional reading reference
-```
-
-+++
-{bdg-primary}`my_new_tag`
-
-    +++
-    {bdg-primary}`my_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.
-
-## Table of contents

book/examples/book_structure.md

@@ -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.
+
+

book/examples/h5p_examples.md

@@ -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
+```

book/examples/interactive_templates.md

@@ -1,16 +1,35 @@
-# 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 elarning goals of your course.
+```
+
+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}
-```
+- Any combination of the above

book/examples/overview.md

@@ -1,28 +1,16 @@
 # Overview
 
-This chapter will be all showcase some TeachBooks making great use of Jupyter Book and TeachBooks features. They can serve as an inspiring strting point for structuring your own TeachBook or just to get an idea of how other teachers are using it. 
+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. 
 
-extra:
+Here is an overview of the different examples:
 
+- Clear book structure (keeping the content organized)
+- Examples of H5p questions
+- illustration of the Live Code (Rocket) feature
+- Combination of heory and interactive questions
+- Templates for interactive coding and non-coding elements
 
-includes examples for jupyter book pages with features. Here is an overview of the different examples:
-
-- 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
-
-
-Inspiring Examples to include:
-- H5p quizes
-    - Multiple choice (Question Set) -> MUDE Q1 Chapter 3 observation theory (3.1 Introduction)
-    - Complex fill in the blanks -> MUDE Q1 Chapter 3 observation theory (3.7 Non-linear least squares estimation)
-    - Dialog cards -> Optimization Chapter 1. Unconstrained Optimization (has a very interactive page with all h5p functions)
-    - True/False Question -> MUDE Q2 Chapter 5 Optimization (5.4 Example Linear Programming)
-
+Julie:
 - Sphinx Thebe rocket part 
     - Python for engineers Chapter 7 Matplotlib (Simple Code/which is what the browser python is for- heavy computations do the 'traditional' python) here might be a good section to add a note to clarify what is often asked during the teacher lunches
     - Look for a little bit harder code to show more complex computations are possible
@@ -34,7 +22,4 @@ Inspiring Examples to include:
     - a whole set of questions that are based on the interactive plot + answers provided in tab
 
 
-- Grasple?
-- Videos? (too basic?)
-- Elaborate on the templates?
 

book/examples/theory_questions.md

@@ -1,6 +1,6 @@
-# Combining theory with interactive questions
+# Combining theory and interactive questions
 
-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
 ```