mirror of
https://github.com/TeachBooks/manual.git
synced 2026-11-12 22:35:51 +00:00
update
This commit is contained in:
Tom van Woudenberg
parent
f2deda3f88
commit
9ff4e4f03f
2 changed files with 195 additions and 53 deletions
178
book/_static/power.html
Normal file
178
book/_static/power.html
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CO2 vs Power</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>
|
||||
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
|
||||
<style>
|
||||
.slider {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
.slider-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
.output {
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.output p {
|
||||
margin: 5px 0;
|
||||
}
|
||||
.output .emoji {
|
||||
font-size: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="sliderContainer" class="slider-container"></div>
|
||||
<div id="outputContainer" class="output"></div>
|
||||
|
||||
<script>
|
||||
var RPM = [800, 1000, 1200, 1400, 1700, 1800];
|
||||
var CO2 = [708, 696.889, 688.247, 682.897, 684.955, 697.3];
|
||||
var POW = [161.141, 263.243, 330.51, 381.561, 391.17, 370];
|
||||
|
||||
function weighted_obj(s) {
|
||||
var delta_p = 1 / 3;
|
||||
var delta_c = 1 - delta_p;
|
||||
return -delta_p * POWfunc(s) + delta_c * CO2func(s);
|
||||
}
|
||||
|
||||
var Pt = 460;
|
||||
var Ct = 640;
|
||||
function goal_attainment(s) {
|
||||
return Math.max(Pt - POWfunc(s), CO2func(s) - Ct);
|
||||
}
|
||||
|
||||
function CO2func(s) {
|
||||
return interpolate(RPM, CO2, s);
|
||||
}
|
||||
|
||||
function POWfunc(s) {
|
||||
return interpolate(RPM, POW, s);
|
||||
|
||||
}
|
||||
|
||||
function interpolate(x, y, s) {
|
||||
var i = 1;
|
||||
while (x[i] < s) {
|
||||
i++;
|
||||
}
|
||||
var x0 = x[i - 1];
|
||||
var x1 = x[i];
|
||||
var y0 = y[i - 1];
|
||||
var y1 = y[i];
|
||||
var t = (s - x0) / (x1 - x0);
|
||||
|
||||
// Calculate the coefficients for the cubic spline interpolation
|
||||
var h = x1 - x0;
|
||||
var a = (1 - t) * (1 - t) * (1 - t);
|
||||
var b = 3 * t * (1 - t) * (1 - t);
|
||||
var c = 3 * t * t * (1 - t);
|
||||
var d = t * t * t;
|
||||
|
||||
// Perform cubic spline interpolation
|
||||
var interpolatedValue = a * y0 + b * y[i - 1] + c * y[i] + d * y1;
|
||||
|
||||
return interpolatedValue;
|
||||
}
|
||||
|
||||
function func(x) {
|
||||
|
||||
var weighted_obj_val = weighted_obj(x).toFixed(2);
|
||||
var goal_attainment_val = goal_attainment(x).toFixed(2);
|
||||
|
||||
var outputContainer = document.getElementById("outputContainer");
|
||||
var weighted_obj_val = weighted_obj(x).toFixed(2);
|
||||
var goal_attainment_val = goal_attainment(x).toFixed(2);
|
||||
var POWfunc_val = POWfunc(x).toFixed(2);
|
||||
var CO2func_val = CO2func(x).toFixed(2);
|
||||
|
||||
outputContainer.innerHTML = "<p>Weighted 🏋️ Objective: " + " = - 1/3 * POWfunc(" + x + ") + 2/3 * CO2func(" + x + ") = - 1/3 * " + POWfunc_val + " + 2/3 * " + CO2func_val + " = " + weighted_obj_val + "</p>" +
|
||||
"<p>Goal 🥅 Attainment: max(460 - POWfunc(" + x + "), CO2func(" + x + ") - 640) = max(460 - " + POWfunc_val + ", " + CO2func_val + " - 640) = " + goal_attainment_val ;
|
||||
|
||||
var plotContainer = document.createElement("div");
|
||||
plotContainer.id = "plotContainer";
|
||||
plotContainer.style.height = "400px";
|
||||
outputContainer.appendChild(plotContainer);
|
||||
|
||||
var plotData = [
|
||||
{
|
||||
x: [CO2func(parseFloat(document.getElementById("x").value))],
|
||||
y: [POWfunc(parseFloat(document.getElementById("x").value))],
|
||||
type: 'scatter',
|
||||
mode: 'markers',
|
||||
name: 'Selected RPM'
|
||||
}
|
||||
];
|
||||
|
||||
var plotLayout = {
|
||||
xaxis: {
|
||||
title: 'CO2 (g/kWh)',
|
||||
range: [680, 710]
|
||||
},
|
||||
yaxis: {
|
||||
title: 'Power functions (kW)',
|
||||
range: [400, 150], // Flipped y-axis range
|
||||
},
|
||||
title: {
|
||||
text: 'CO2 vs Power',
|
||||
font: {
|
||||
size: 16
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Plotly.newPlot('plotContainer', plotData, plotLayout);
|
||||
}
|
||||
|
||||
var sliderContainer = document.getElementById("sliderContainer");
|
||||
var xSlider = document.createElement("input");
|
||||
xSlider.type = "range";
|
||||
xSlider.min = 800;
|
||||
xSlider.max = 1800;
|
||||
xSlider.value = 1000;
|
||||
xSlider.step = 1;
|
||||
xSlider.id = "x";
|
||||
xSlider.oninput = function() {
|
||||
func(parseFloat(document.getElementById("x").value));
|
||||
};
|
||||
xSlider.classList.add("slider");
|
||||
|
||||
var xLabel = document.createElement("label");
|
||||
xLabel.innerHTML = "RPM";
|
||||
xLabel.setAttribute("for", "x");
|
||||
xLabel.style.textAlign = "right";
|
||||
|
||||
var valueDisplay = document.createElement("span");
|
||||
valueDisplay.innerHTML = xSlider.value; // Set the initial value of the display element
|
||||
valueDisplay.style.marginLeft = "10px"; // Add some margin to separate the value from the slider
|
||||
|
||||
xSlider.oninput = function() {
|
||||
valueDisplay.innerHTML = xSlider.value; // Update the value display element when the slider value changes
|
||||
func(parseFloat(document.getElementById("x").value));
|
||||
};
|
||||
|
||||
sliderContainer.appendChild(xLabel);
|
||||
sliderContainer.appendChild(xSlider);
|
||||
sliderContainer.appendChild(valueDisplay); // Append the value display element
|
||||
|
||||
|
||||
var outputContainer = document.getElementById("outputContainer");
|
||||
outputContainer.style.height = "400px";
|
||||
|
||||
|
||||
// Call func with initial values
|
||||
func(parseFloat(document.getElementById("x").value));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -18,29 +18,18 @@ 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
|
||||
```{iframe} ../_static/power.html
|
||||
```
|
||||
|
||||
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
|
||||
```{h5p} https://tudelft.h5p.com/content/1292260184374358717/embed
|
||||
```
|
||||
|
||||
**Try it out!**
|
||||
|
||||
```{h5p} https://tudelft.h5p.com/content/1292050206829217497/embed
|
||||
```{h5p} https://tudelft.h5p.com/content/1292260188487459217/embed
|
||||
```
|
||||
|
||||
|
||||
## Question Set
|
||||
|
||||
Question sets consist of a question and one or more possible answers to that question.
|
||||
|
|
@ -49,20 +38,10 @@ Question sets consist of a question and one or more possible answers to that que
|
|||
|
||||
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
|
||||
```{h5p} https://tudelft.h5p.com/content/1292060781042105617/embed
|
||||
```
|
||||
|
||||
```{figure} figures/Question_set_2.PNG
|
||||
---
|
||||
width: 600
|
||||
align: center
|
||||
---
|
||||
Equations Answers
|
||||
```{h5p} https://tudelft.h5p.com/content/1292046737060674407/embed
|
||||
```
|
||||
|
||||
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.
|
||||
|
|
@ -98,12 +77,7 @@ The complex fill in the blanks can be used to evaluate numerical answers.
|
|||
|
||||
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
|
||||
```{h5p} https://tudelft.h5p.com/content/1292064774866067777/embed
|
||||
```
|
||||
As you can see, the precision of the answer sought for is specified and the figure below shows again the incorporation of feedback.
|
||||
|
||||
|
|
@ -119,12 +93,7 @@ Wrong Answer + Feedback
|
|||
|
||||
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 independently. 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 programming problem with continuous variables. It makes use of tables and the manipulation of equations to find the optimal values. Unfortunately, with a large number of variables this tables tend to get quite big and filling in the cells becomes laborious.
|
||||
|
||||
```{figure} figures/blanks3.PNG
|
||||
---
|
||||
width: 600
|
||||
align: center
|
||||
---
|
||||
SIMPLEX Method
|
||||
```{h5p} https://tudelft.h5p.com/content/1292131432784432037/embed
|
||||
```
|
||||
**Truss structure**
|
||||
|
||||
|
|
@ -157,14 +126,10 @@ 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. Open the second, fourth and fifth question:
|
||||
|
||||
```{h5p} https://tudelft.h5p.com/content/1292120485436114287/embed
|
||||
```
|
||||
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!**
|
||||
|
||||
|
|
@ -177,16 +142,15 @@ Drag and Drop questions are useful to make the distinction between different con
|
|||
|
||||
**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
|
||||
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.
|
||||
|
||||
```{figure} figures/drag1.PNG
|
||||
---
|
||||
width: 600
|
||||
align: center
|
||||
---
|
||||
Drag and Drop
|
||||
The fourth question in this question set is a drag and drop question:
|
||||
|
||||
```{h5p} https://tudelft.h5p.com/content/1292121213033110307/embed
|
||||
```
|
||||
|
||||
The correct answer leads to:
|
||||
|
||||
```{figure} figures/drag2.PNG
|
||||
---
|
||||
width: 600
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue