diff --git a/book/examples/figures/live_code3.PNG b/book/examples/figures/live_code3.PNG new file mode 100644 index 0000000..8da2fc4 Binary files /dev/null and b/book/examples/figures/live_code3.PNG differ diff --git a/book/examples/figures/live_code4.PNG b/book/examples/figures/live_code4.PNG new file mode 100644 index 0000000..e9a2b94 Binary files /dev/null and b/book/examples/figures/live_code4.PNG differ diff --git a/book/examples/figures/live_code5.PNG b/book/examples/figures/live_code5.PNG new file mode 100644 index 0000000..79c9800 Binary files /dev/null and b/book/examples/figures/live_code5.PNG differ diff --git a/book/examples/figures/live_code6.PNG b/book/examples/figures/live_code6.PNG new file mode 100644 index 0000000..7de6934 Binary files /dev/null and b/book/examples/figures/live_code6.PNG differ diff --git a/book/examples/figures/live_code7.PNG b/book/examples/figures/live_code7.PNG new file mode 100644 index 0000000..51b2e8e Binary files /dev/null and b/book/examples/figures/live_code7.PNG differ diff --git a/book/examples/h5p_examples.md b/book/examples/h5p_examples.md index 30f737f..85ea397 100644 --- a/book/examples/h5p_examples.md +++ b/book/examples/h5p_examples.md @@ -13,7 +13,7 @@ Some best-practices on the use of H5p: 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 +**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. @@ -45,7 +45,7 @@ align: center Dialoge Card ``` -#### Try it out! +**Try it out!** @@ -53,7 +53,7 @@ Dialoge Card Question sets consist of a question and one or more possible answers to that question. -#### MUDE - Observation Theory +**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. @@ -91,7 +91,7 @@ align: center --- Tips ``` -#### Try it out! +**Try it out!** Have a look at the following 7 questions. @@ -101,7 +101,7 @@ Have a look at the following 7 questions. The complex fill in the blanks can be used to evaluate numerical answers. -#### MUDE - Observation Theory +**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. @@ -122,7 +122,7 @@ align: center Wrong Answer + Feedback ``` -#### MUDE - Optimization +**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. @@ -133,7 +133,7 @@ align: center --- SIMPLEX Method ``` -#### Try it out! +**Try it out!** @@ -141,7 +141,7 @@ SIMPLEX Method This next type of quiz is fairly self explainatory :) -#### MUDE - Optimization +**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. @@ -162,7 +162,7 @@ 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! +**Try it out!** @@ -170,7 +170,7 @@ The small circles below the question indicates that there are more questions in Drag and Drop questions are useful to make the distinction between different concepts that might often cause confusion. -#### MUDE - Optimization +**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 diff --git a/book/examples/interactive_templates.md b/book/examples/interactive_templates.md index 6e2e62f..8c45e5d 100644 --- a/book/examples/interactive_templates.md +++ b/book/examples/interactive_templates.md @@ -1,15 +1,13 @@ # Templates for interactive coding and non-coding elements -Lastly some example pages are shown which combine theory and interactive questions and coding to different degrees. - -The following templates are given: +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. +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) @@ -31,5 +29,4 @@ These templates make use of the following applications in various combinations: - H5p - Grasple-exercises - Interactive widgets -- Live coding exercise checking with widgets -- Any combination of the above \ No newline at end of file +- Live coding exercise checking with widgets \ No newline at end of file diff --git a/book/examples/live_code.md b/book/examples/live_code.md new file mode 100644 index 0000000..1b1a6bb --- /dev/null +++ b/book/examples/live_code.md @@ -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. \ No newline at end of file diff --git a/book/examples/overview.md b/book/examples/overview.md index 4c991af..6a3a39d 100644 --- a/book/examples/overview.md +++ b/book/examples/overview.md @@ -2,24 +2,13 @@ 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. -Here is an overview of the different examples: +Here is an overview of the different examples discussed: - Clear book structure (keeping the content organized) - Examples of H5p questions -- illustration of the Live Code (Rocket) feature -- Combination of heory and interactive questions +- Illustration of the Live Code (Rocket) feature +- Combination of theory and interactive questions - Templates for interactive coding and non-coding elements -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 - -> Possibly MUDE Q2 Signal Processing (Square wave example) - -- Interactive *hidden* code (this is not sphinx thebe?) - -> MUDE Q2 Chapter 6 Machine learning (K-nearest neighbour) - - interactive plot - - a whole set of questions that are based on the interactive plot + answers provided in tab -