15.10.2023 | Responsiv SQL-lermapp

U-Bodigat · Oct 15, 2023 · 55f8911 · 55f8911
1 parent a24d978
commit 55f8911
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 3 deletions.
diff --git a/lerntools/sqllernapp/index.html b/lerntools/sqllernapp/index.html
@@ -95,6 +95,7 @@
                 </div>
                 <div id="result"></div>
             </div>
+            <h3 id="richtigeantwort"></h3>
             <button id="submit-btn2">Ergebnis</button>
         </div>
         <div id="quiz-popup">
@@ -1195,6 +1196,7 @@ <h2>Quiz abgeschlossen!</h2>
             const quizProgress = document.getElementById('quiz-progress');
             const quizScore = document.getElementById('quiz-score');
             const fruehButton = document.getElementById('submit-btn2');
+            const showAnswer = document.getElementById('richtigeantwort');
             const totalQuestions = questionsNew.length;
 
             let currentQuestionIndex = 0;
@@ -1247,17 +1249,20 @@ <h2>Quiz abgeschlossen!</h2>
                         optionsContainer.appendChild(option);
                     });
                     sqlAnswerInput.style.display = 'none';
+                    showAnswer.style.display = 'none';
                     document.getElementById('submit-btn').style.display = "none";
                     submitButton.style.display = 'none';
                 } else if (currentQuestion.type === 'userInput') {
                     sqlAnswerInput.value = '';
                     sqlAnswerInput.style.display = 'block';
+                    showAnswer.style.display = 'none';
                     submitButton.style.display = 'block';
                     document.getElementById('submit-btn').style.display = "none";
                 } else if (currentQuestion.type === 'sqlQuery') {
                     let btn = document.getElementById('submit-btn')
                     document.getElementById('sql-input-container').style.display = "flex";
                     btn.style.display = "block";
+                    showAnswer.style.display = 'none';
                     document.getElementById('sql-answer').style.display = "block";
                     btn.addEventListener("click", () => checkAnswer(document.getElementById('sql-answer').value))
 
@@ -1271,13 +1276,15 @@ <h2>Quiz abgeschlossen!</h2>
             function checkAnswer(selectedAnswer) {
                 const currentQuestion = questions[currentQuestionIndex];
                 if (currentQuestion.type === 'multipleChoice') {
-                    if (selectedAnswer === currentQuestion.correctAnswer) {
+                    if (selectedAnswer.toLowerCase() === currentQuestion.correctAnswer.toLowerCase()) {
                         resultElement.textContent = 'Richtig!';
                         const option = document.getElementById("options").style.pointerEvents = "none";
                         score++;
                     } else {
                         resultElement.textContent = 'Falsch. Versuche es erneut.';
                         const option = document.getElementById("options").style.pointerEvents = "none";
+                        showAnswer.style.display = 'block';
+                        showAnswer.textContent = currentQuestion.correctAnswer;
                     }
                 } else if (currentQuestion.type === 'userInput') {
                     const userSqlAnswer = sqlAnswerInput.value.trim();
@@ -1286,21 +1293,26 @@ <h2>Quiz abgeschlossen!</h2>
                         score++;
                     } else {
                         resultElement.textContent = 'Falsch. Versuche es erneut.';
+                        showAnswer.style.display = 'block';
+                        showAnswer.textContent = currentQuestion.correctAnswer;
                     }
                 } else if (currentQuestion.type === "sqlQuery") {
-                    if (selectedAnswer === currentQuestion.correctAnswer) {
+                    if (selectedAnswer.toLowerCase() === currentQuestion.correctAnswer.toLowerCase()) {
                         resultElement.textContent = 'Richtig!';
                         score++;
                     } else {
                         resultElement.textContent = 'Falsch. Versuche es erneut.';
+                        showAnswer.style.display = 'block';
+                        showAnswer.textContent = currentQuestion.correctAnswer;
+
                     }
                 }
 
                 currentQuestionIndex++;
                 fragenCount++;
 
                 if (currentQuestionIndex < totalQuestions) {
-                    setTimeout(displayQuestion, 2000);
+                    setTimeout(displayQuestion, 5000);
                 } else {
                     openPopup(score, totalQuestions);
                 }

diff --git a/lerntools/sqllernapp/style.css b/lerntools/sqllernapp/style.css
@@ -446,6 +446,11 @@ body {
     transition: width 0.5s;
 }
 
+#überprüfungstext {
+    color: #fff;
+    font-size: 20px;
+}
+
 
 /* Stile für die lernen.html */
 
@@ -669,4 +674,98 @@ button#searchButton:hover {
 
 .scroll-button.active {
     transform: scale(1.1);
+}
+
+
+/*Rsponsive Design*/
+
+@media (max-width: 1520px) {
+    #mainlernensql {
+        margin-top: 100px;
+        margin-bottom: 20px;
+    }
+}
+
+@media (max-width: 960px) {
+    #mainlernensql {
+        margin-top: 150px;
+        margin-bottom: 20px;
+    }
+}
+
+@media (max-width: 670px) {
+    .option {
+        margin-right: 50px;
+    }
+}
+
+@media (max-width: 640px) {
+    .option {
+        margin-right: 130px;
+    }
+    #question {
+        margin-right: 100px;
+    }
+    #quiz-container {
+        margin: auto;
+        padding: auto;
+    }
+}
+
+@media (max-width: 600px) {
+    #mainlernensql {
+        margin-top: 200px;
+        margin-bottom: 20px;
+    }
+}
+
+@media (max-width: 540px) {
+    .option {
+        margin-right: 200px;
+    }
+    #question {
+        margin-right: 150px;
+    }
+    #submit-btn2 {
+        margin-right: -200px;
+    }
+}
+
+@media (max-width: 480px) {
+    .option {
+        margin-right: 250px;
+    }
+    #question {
+        margin-right: 200px;
+    }
+    #submit-btn2 {
+        margin-right: -200px;
+    }
+    #quiz-container {
+        margin-top: 150px;
+    }
+}
+
+@media (max-width: 450px) {
+    .option {
+        margin-right: 250px;
+    }
+    #question {
+        margin-right: 250px;
+    }
+    #submit-btn2 {
+        margin-right: -200px;
+    }
+}
+
+@media (max-width: 320px) {
+    .option {
+        margin-right: 250px;
+    }
+    #question {
+        margin-right: 300px;
+    }
+    #submit-btn2 {
+        margin-right: -200px;
+    }
 }