online version of the app is working

fritzsche · Jun 21, 2024 · 1b9d324 · 1b9d324
1 parent 97a39ec
commit 1b9d324
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -1,19 +1,23 @@
-# Generiere Fragebögen für die Lizenzprüfung zur Afu Klasse N
-Dieses kleine Programm(Website) generiert per Zufallsgenerator Fragen und Antworten für die Amateufunkprüfung der Klasse N.
+# Simulator für Lizenzprüfung (ab 24.6.2024)
+Dieses kleine Programm(Website) generiert per Zufallsgenerator Fragen und Antworten für die Amateufunkprüfung (ab 24.5.2024).
 
-Achtung: Bei jedem Aufruf (auch Reload) wird ein neuer Fragebogen per Zufallsgenerator erzeugt.
-Link: https://fritzsche.github.io/afu_test/
+Es gibt ein version für den Druck (Papier), hier werden die Lösungen auf eine separate Seite gedruckt.
+
+Du kannst aber auch Papier sparen und die Fragen direkt am Bildschirm Beantworten.
+
+* Zur Ausdrucken: https://fritzsche.github.io/afu_test/
+* Fragen am Bildschirm: https://fritzsche.github.io/afu_test/online.html
 
 Es können jeweils 25 Fragen (mit Antworten) für die folgenden Prüfungsteile generiert werden:
+
 1) Vorschriften
 2) Betriebstechnik
 3) Technik Klasse N
 4) Technik Klasse E
 5) Technik Klasse A
 
-Die Ausgabe ist aktuell für den Druck bestimmt (Papier). Die Lösungen werden beim Druck auf eine separate Seite gedruckt. Um Papier zu sparen kannst Du auch zunächst NUR in ein PDF drucken.
+__Achtung:__ Bei jedem Aufruf (auch Reload) wird ein neuer Fragebogen per Zufallsgenerator erzeugt.
 
-Eine Lösung die Fragen Online (ohne Papier) zu beantworten wäre auch hilfreich wird aber aktuell (noch?) nicht unterstützt. Siehe unten: [Alpha Code](#alpha_code)
 
 # Prüfungsfragen
 Die Fragen die hier zum Einsatz kommen sind von der Bundesnetzagentur am 16.6.2024 in der maschienenlesbaren Version heruntergeladen worden.
@@ -25,10 +29,13 @@ https://www.bundesnetzagentur.de/995320
 Die Fragen die tatsächlich zu Einsatz kommen können natürlich abweichen. Auch wird die Bundesnetzagentur die Fragen anders auswählen. Wie beschrieben, werden die Fragen für die einzelnen Kategorien (und die Reihenfolge der Antworten) nur mit dem Zufallsgenerator bestimmt. 
 
 
-# Alpha Code
-Der Code wurde unter Zeitdruck (nahe Prüfung) in 1-2 Stunden zusammengeschustert. Es ist ein Wunder, dass er überhaupt funktioniert. Keine Garantie, dass dies auch bei Dir so ist.
+# Beta Code
+Der Code wurde unter Zeitdruck (nahe Prüfung) in kurzer Zeit entstanden. 
+Ich teste die App aktuell nur mit Google Chrome Browser.
+Keine Garantie für die App.
 
 # Version
+* 0.05 - (21. Juni 2024) Die Fragebögen können jetzt direkt am Bildschirm beantwortet werden
 * 0.04 - (20. Juni 2024) Bildskalierung etwas verbessert
 * 0.03 - (19. Juni 2024) Prüfungsteile können separat generiert werden + Technik E + Technik A
 * 0.02 - (17. Juni 2024) Verwende KaTeX um Formeln korrekt auszugeben

diff --git a/online.html b/online.html
@@ -38,9 +38,11 @@ <h3>Thomas Fritzsche (DJ1TF) - <a href="https://github.com/fritzsche/afu_test">g
   <h1 id="title"></h1>
 
   <div id="questions"> </div>
-  <div>
+  <div>    
     <button type="submit" onClick="eval_test()">Auswerten</button>
+    <div id="result"></div>
   </div>
+
   <script src="jsonpath.js"></script>
   <script src="test.js"></script>
 </body>

diff --git a/print.css b/print.css
@@ -1,6 +1,6 @@
 @media print {
     html {
-        font-size: 0.9em;
+        font-size: 12pt;
     }
 
     .no-print {

diff --git a/style.css b/style.css
@@ -1,5 +1,38 @@
 html {
-  font-size: 0.9em;
+  font-size: 12pt;
+}
+
+
+.green {
+  background-color:rgb(214, 240, 213);
+}
+
+
+.red {
+  background-color:rgb(246, 223, 230);
+
+}
+
+.yellow {
+  background-color:rgb(247, 241, 176);
+
+}
+
+#result {
+  width: 100%;
+  font-weight: bold;
+  font-size: 14pt;  
+  font-family:arial, "lucida console", sans-serif;
+}
+
+#result > div {
+  width: 100%;
+
+  padding: 0.5em;
+}
+
+.smily {
+ font-size: 30pt;
 }
 
 img {

diff --git a/test.js b/test.js
@@ -43,15 +43,15 @@ function permute_answer(arr) {
 }
 
 
-function html_answers(answers,correct,number, online) {
+function html_answers(answers, correct, number, online) {
     let result = "";
     for (let i = 0; i < answers.length; i++) {
-        let opt = `data-option ="${i == correct -1 ? "correct" : "incorrect"}"`
+        let opt = `data-option ="${i == correct - 1 ? "correct" : "incorrect"}"`
         if (online) {
-           result += `<div><input ${opt} type="radio" id="${number}-${i}" name="${number}" value="${number}-${i}" />
+            result += `<div><input class="option" ${opt} type="radio" id="${number}-${i}" name="${number}" value="${number}-${i}" />
             <label for="${number}-${i}">${answers[i]}</label></div>`
         } else {
-          result += `<li class="option" ${opt}>${answers[i]}</li>`
+            result += `<li class="option" ${opt}>${answers[i]}</li>`
         }
     }
     if (!online) result = `<ol>${result}</ol>`
@@ -71,13 +71,13 @@ function html_questions(questions, online) {
         let res = permute_answer(answers);
         // generate a html fragment from permutated
         // answers
-        let ans_html = html_answers(res.answers,res.correct,question.number,online);
+        let ans_html = html_answers(res.answers, res.correct, question.number, online);
         if (question.picture_question) {
             picture = `<div><img  src="Fragen/svgs/${question.picture_question}.svg" /></div>`
         }
-        answer_html   += `<li> <strong>${question.number} </strong> (${res.correct}) ${res.answers[res.correct - 1]}</li>`
+        answer_html += `<li> <strong>${question.number} </strong> (${res.correct}) ${res.answers[res.correct - 1]}</li>`
         let correct_answer = ` data-correct="${res.correct}"`
-        question_html += `<li${ correct_answer } class="question"> <strong>${question.number} </strong>${question.question} ${picture} ${ans_html}</li>`
+        question_html += `<li${correct_answer} class="question"> <strong>${question.number} </strong>${question.question} ${picture} ${ans_html}</li>`
     }
     return { questions: question_html, answer: answer_html };
 }
@@ -91,28 +91,29 @@ function render_test(title, test) {
         .then((json) => {
             const answer = document.getElementById("answer");
             let html = "";
-            let result = jsonPath(json, "$..questions[?(@.class=1)]"); 
+            let result = jsonPath(json, "$..questions[?(@.class=1)]");
 
             let all_questions = result.filter((frage =>
                 frage.number.startsWith(test)
             ))
             document.getElementById("title").innerHTML = title;
-            let sel_questions = pick(all_questions, 2)
+            let sel_questions = pick(all_questions, 25)
             const questions = document.getElementById("questions");
-            
+
 
             if (answer) {
-               html = html_questions(sel_questions, false);
+                html = html_questions(sel_questions, false);
             } else {
                 html = html_questions(sel_questions, true);
+                document.querySelector("button").hidden = false;
+                document.querySelector("#result").innerHTML = ""   
             }
 
             questions.innerHTML = `<ol>${html.questions}</ol>`
             if (answer) {
-            answer.innerHTML = `<ol>${html.answer}</ol>`
+                answer.innerHTML = `<ol>${html.answer}</ol>`
             }
 
-
         });
     setTimeout(() => {
         renderMathInElement(document.body, {
@@ -161,5 +162,34 @@ function select_test() {
 
 function eval_test() {
     console.log("Evaluate");
+    var correct = 0;
+    var all_correct = document.querySelectorAll('.option[data-option=correct]:checked');
+    if (all_correct) correct = all_correct.length;
+
+    var radio_buttons = document.querySelectorAll('input[type=radio]:not(:checked)');
+    if (radio_buttons) radio_buttons.forEach(element => {
+        element.disabled = true
+    })
+
+    var green = document.querySelectorAll('div:has(> .option[data-option=correct])');
+    if (green) green.forEach(element => {
+        element.classList.add("green");
+    });
+    var red = document.querySelectorAll('div:has(> .option[data-option=incorrect]:checked)');
+    if (red) red.forEach(element => {
+        element.classList.add("red");
+    });
+
+    var nochmal = '<button type="submit" onClick="select_test()">Nochmal!</button>'
+    var result_str = `<div class="red"><span class="smily"> &#128531;</span> ${correct} von 25 Fragen richtig beantwortet: leider nicht bestanden... ${nochmal}<div>`
+    if (correct >= 19) {
+        result_str = `<div class="green"><span class="smily">&#128512;</span> ${correct} von 25 Fragen richtig beantwortet:  Bestanden!!! ${nochmal}<div>`
+    } else if (correct >= 17) {
+        result_str = `<div class="yellow"><span class="smily">&#128528;</span> ${correct} von 25 Fragen richtig beantwortet:  Eventuell eine mündliche Nachprüfung... ${nochmal}<div>`
+    }
+
+    document.querySelector("button").hidden = true;
+    document.querySelector("#result").innerHTML = result_str
+
 }