Fix: test could not be selected + some links + css work

fritzsche · Jun 25, 2024 · 8834a8e · 8834a8e
1 parent 964b2f8
commit 8834a8e
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 36 deletions.
diff --git a/icon/github-mark.png b/icon/github-mark.png
diff --git a/index.html b/index.html
@@ -20,26 +20,30 @@
 </head>
 
 <body>
-  <div class="no-print">
-    <h1>Generator zur Amateurfunkprüfung</h1>
-    <h3>Thomas Fritzsche (DJ1TF) - <a href="https://github.com/fritzsche/afu_test">github</a></h3>
-    <p id="test_select">
-      Prüfungsteil:
-      <select id="test_select" onchange="select_test()">
-        <option>Vorschriften</option>
-        <option>Betriebstechnik</option>
-        <option>Technik Klasse N</option>
-        <option>Technik Klasse E</option>
-        <option>Technik Klasse A</option>
-      </select>
-    </p>
+  <div class="no-print title">
+    <h2>Simulator für die Amateurfunkprüfung - von DJ1TF/JJ1QPB - Thomas (für Druck)</h2>
+    <div id="sel_test">
+      <div>Link: <a href="online.html">Fragen im Browser beantworten und auswerten</a> </div>
+      <div>Projekt:<a href="https://github.com/fritzsche/afu_test"><img class="icon"
+            src="icon/github-mark.png">Github</a> </div>
+      <p id="sel_test">
+        Prüfungsteil:
+        <select id="test_select" onchange="select_test()">
+          <option>Vorschriften</option>
+          <option>Betriebstechnik</option>
+          <option>Technik Klasse N</option>
+          <option>Technik Klasse E</option>
+          <option>Technik Klasse A</option>
+        </select>
+      </p>
+    </div>
   </div>
 
-  <h1 id="title"></h1>
+  <h2 class="title" id="title"></h2>
 
   <div id="questions"> </div>
   <div style="break-after:page"></div>
-  <h1>Lösungen</h1>
+  <h2 class="title">Lösungen</h2>
   <div id="answer"> </div>
   <script src="jsonpath.js"></script>
   <script src="test.js"></script>

diff --git a/online.css b/online.css
@@ -1,5 +1,13 @@
+.title {
+    font-size: 14pt;
+}
+
 
 
+ol {
+    padding-left: 5px;
+}
+
 img {
     vertical-align:middle;
     margin: 5pt;
@@ -33,7 +41,7 @@ html {
 }
 
 .opt_lab {
-    margin: 1em 0 1em 0;
+    margin: 0.7em 0 0.7em 0;
     align-items: center;
 }
 

diff --git a/online.html b/online.html
@@ -7,7 +7,7 @@
   <meta name="theme-color" content="#000000" />
   <link rel="stylesheet" type="text/css" href="print.css" media="print" />
   <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
-  <link rel="stylesheet" href="online.css" type="text/css" media="screen" />  
+  <link rel="stylesheet" href="online.css" type="text/css" media="screen" />
   <title>Afu Test - von Thomas Fritzsche - DJ1TF </title>
 
   <link rel="stylesheet" href="katex/katex.min.css">
@@ -21,29 +21,33 @@
 </head>
 
 <body>
-  <div class="no-print">
-    <h1>Generator zur Amateurfunkprüfung</h1>
-    <h3>Thomas Fritzsche (DJ1TF) - <a href="https://github.com/fritzsche/afu_test">github</a></h3>
-    <p id="test_select">
-      Prüfungsteil:
-      <select id="test_select" onchange="select_test()">
-        <option>Vorschriften</option>
-        <option>Betriebstechnik</option>
-        <option>Technik Klasse N</option>
-        <option>Technik Klasse E</option>
-        <option>Technik Klasse A</option>
-      </select>
-    </p>
+  <div class="title">
+    <h2>Simulator für die Amateurfunkprüfung - von DJ1TF/JJ1QPB - Thomas (im Browser)</h2>
+    <div id="sel_test">
+      <div>Link: <a href="index.html">Fragen und Antworten ausdrucken</a> </div>
+      <div>Projekt:<a href="https://github.com/fritzsche/afu_test"><img class="icon"
+            src="icon/github-mark.png">Github</a> </div>
+      <p>
+        Prüfungsteil:
+        <select id="test_select" onchange="select_test()">
+          <option>Vorschriften</option>
+          <option>Betriebstechnik</option>
+          <option>Technik Klasse N</option>
+          <option>Technik Klasse E</option>
+          <option>Technik Klasse A</option>
+        </select>
+      </p>
+    </div>
   </div>
 
-  <h1 id="title"></h1>
+  <h2 id="title" class="title" style="font-size: 16pt;"></h2>
 
   <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/style.css b/style.css
@@ -3,6 +3,14 @@ html {
   font-family: "Times New Roman", Times, serif;  
 }
 
+.title {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.icon {
+  height: 12pt;
+}
+
 img {
  vertical-align:middle;
  margin: 5pt;

diff --git a/test.js b/test.js
@@ -89,9 +89,9 @@ function html_questions(questions, 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 class="title">${question.number} </strong> (${res.correct}) ${res.answers[res.correct - 1]}</li>`
         let correct_answer = ` data-correct="${res.correct}"`
-        question_html += `<div class="quest"><li${correct_answer} class="question"> <strong>${question.number} </strong>${question.question} ${picture} ${ans_html}</li></div>`
+        question_html += `<div class="quest"><li${correct_answer} class="question"> <strong class="title">${question.number} </strong>${question.question} ${picture} ${ans_html}</li></div>`
     }
     return { questions: question_html, answer: answer_html };
 }
@@ -122,7 +122,7 @@ function render_test(title, test) {
                     specificQuestions.indexOf(frage.number) >= 0            
                 ))
                 document.getElementById("title").innerHTML = 'Fragen';
-                document.getElementById("test_select").style.display = 'none';
+                document.getElementById("sel_test").style.display = 'none';
 
             } else {            
               all_questions = result.filter((frage =>