diff --git a/lerntools/sqllernapp/index.html b/lerntools/sqllernapp/index.html index 6e33e36..409a53f 100644 --- a/lerntools/sqllernapp/index.html +++ b/lerntools/sqllernapp/index.html @@ -95,6 +95,7 @@
+

@@ -1195,6 +1196,7 @@

Quiz abgeschlossen!

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 @@

Quiz abgeschlossen!

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 @@

Quiz abgeschlossen!

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,13 +1293,18 @@

Quiz abgeschlossen!

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; + } } @@ -1300,7 +1312,7 @@

Quiz abgeschlossen!

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 index 4043bd4..7e7865f 100644 --- 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; + } } \ No newline at end of file