Add parameterdarstellung

kertal · Jan 12, 2025 · bf8855b · bf8855b
1 parent 00a82c0
commit bf8855b
Show file tree

Hide file tree

Showing 2 changed files with 194 additions and 0 deletions.
diff --git a/parameterdarstellung.html b/parameterdarstellung.html
@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Multiple-Choice-Test: Parameterdarstellung von Geraden</title>
+  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+      background-color: #f4f4f9;
+      color: #333;
+    }
+
+    .container {
+      max-width: 600px;
+      margin: 20px auto;
+      padding: 20px;
+      background: white;
+      border-radius: 8px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    h1 {
+      text-align: center;
+      color: #4CAF50;
+    }
+
+    .question {
+      margin: 20px 0;
+    }
+
+    label {
+      display: block;
+      padding: 10px;
+      background: #f9f9f9;
+      margin-bottom: 10px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: background 0.3s ease;
+    }
+
+    label:hover {
+      background: #e0f7fa;
+    }
+
+    input[type="checkbox"] {
+      display: none;
+    }
+
+    input[type="checkbox"]:checked + label {
+      background: #c8e6c9;
+      border-color: #4CAF50;
+    }
+
+    button {
+      display: block;
+      width: 100%;
+      padding: 10px;
+      background: #4CAF50;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      font-size: 16px;
+      cursor: pointer;
+      transition: background 0.3s ease;
+    }
+
+    button:hover {
+      background: #45a049;
+    }
+
+    .result {
+      margin-top: 20px;
+      text-align: center;
+      font-weight: bold;
+    }
+
+    .explanation {
+      display: none;
+      margin-top: 10px;
+      font-size: 0.9em;
+      background: #fff3e0;
+      padding: 10px;
+      border-left: 4px solid #ff9800;
+    }
+
+    .math {
+      font-size: 1.2em;
+    }
+
+    .diagram {
+      text-align: center;
+      margin: 20px 0;
+    }
+
+    .diagram svg {
+      max-width: 100%;
+      height: auto;
+    }
+  </style>
+</head>
+<body>
+<div class="container">
+  <h1>Parameterdarstellung von Geraden</h1>
+  <div class="diagram">
+   <img src="./parameterdarstellung.png"  height="200" alt="Geraden g und h"/>
+  </div>
+  <div class="question">
+    <p class="math">
+      Die Abbildung zeigt die beiden Geraden \(g\) und \(h\). Auf jeder der Geraden sind drei Punkte gekennzeichnet: \(A, B, P \in g\) bzw. \(B, C, Q \in h\). Zusätzlich ist von jeder Geraden ein Richtungsvektor dargestellt.<br>
+      Kreuzen Sie die beiden Aussagen an, bei denen \(s, t \in \mathbb{R}\) mit \(s \neq 0\) und \(t \neq 0\) so gewählt werden können, dass die jeweilige Aussage wahr ist.
+    </p>
+    <form id="quizForm">
+      <div>
+        <input type="checkbox" id="option1" name="option">
+        <label for="option1">\(A = C + s \cdot \vec{v} + t \cdot \vec{w}\)</label>
+        <div class="explanation" id="explanation1">
+          Diese Aussage ist korrekt, da \(A\) durch die Kombination der Richtungsvektoren \(\vec{v}\) und \(\vec{w}\) beschrieben werden kann.
+        </div>
+      </div>
+      <div>
+        <input type="checkbox" id="option2" name="option">
+        <label for="option2">\(B = C + s \cdot \vec{v}\)</label>
+        <div class="explanation" id="explanation2">
+          Diese Aussage ist falsch, da \(B\) nicht entlang \(\vec{v}\) von \(C\) aus erreicht wird.
+        </div>
+      </div>
+      <div>
+        <input type="checkbox" id="option3" name="option">
+        <label for="option3">\(B = Q + t \cdot \vec{w}\)</label>
+        <div class="explanation" id="explanation3">
+          Diese Aussage ist korrekt, da \(B\) entlang des Richtungsvektors \(\vec{w}\) von \(Q\) aus erreicht werden kann.
+        </div>
+      </div>
+      <div>
+        <input type="checkbox" id="option4" name="option">
+        <label for="option4">\(A = P + s \cdot \vec{v} + t \cdot \vec{w}\)</label>
+        <div class="explanation" id="explanation4">
+          Diese Aussage ist falsch, da \(A\) nicht von \(P\) aus entlang beider Richtungsvektoren erreicht wird.
+        </div>
+      </div>
+      <div>
+        <input type="checkbox" id="option5" name="option">
+        <label for="option5">\(C = P + t \cdot \vec{w}\)</label>
+        <div class="explanation" id="explanation5">
+          Diese Aussage ist falsch, da \(C\) nicht entlang \(\vec{w}\) von \(P\) aus erreicht wird.
+        </div>
+      </div>
+      <button type="button" onclick="checkAnswers()">Antworten überprüfen</button>
+    </form>
+    <div id="result" class="result"></div>
+  </div>
+</div>
+
+<script>
+  function checkAnswers() {
+    const correctAnswers = ["option1", "option3"];
+    const explanations = {
+      "option1": "explanation1",
+      "option2": "explanation2",
+      "option3": "explanation3",
+      "option4": "explanation4",
+      "option5": "explanation5"
+    };
+
+    const selected = Array.from(document.querySelectorAll('input[name="option"]:checked')).map(input => input.id);
+    const resultDiv = document.getElementById('result');
+
+    let isCorrect = true;
+    for (const option of Object.keys(explanations)) {
+      const explanation = document.getElementById(explanations[option]);
+      if (selected.includes(option) && !correctAnswers.includes(option)) {
+        explanation.style.display = 'block';
+        isCorrect = false;
+      } else {
+        explanation.style.display = 'none';
+      }
+    }
+
+    if (selected.length === 2 && selected.every(option => correctAnswers.includes(option))) {
+      resultDiv.textContent = "Richtig! Gut gemacht!";
+      resultDiv.className = "result correct";
+    } else {
+      resultDiv.textContent = "Leider falsch. Bitte überprüfen Sie die Erklärungen.";
+      resultDiv.className = "result incorrect";
+    }
+  }
+</script>
+</body>
+</html>
diff --git a/parameterdarstellung.png b/parameterdarstellung.png