diff --git a/README.md b/README.md index d42f0d3..b501584 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,7 @@ Ein interaktives Lernprojekt im Rahmen der Lehrveranstaltung „Entwicklung inte | `team.html` | Teamvorstellung und Fetch-API-Demo | | `ueber_uns.html` | Mission und Teamhintergrund | | `kontakt.html` | Kontaktformular | +| `quiz.html` | Mini-Quiz über Web-Entwicklung | | `impressum.html` | Rechtliche Pflichtangaben | --- @@ -25,6 +26,13 @@ Ein interaktives Lernprojekt im Rahmen der Lehrveranstaltung „Entwicklung inte - Zeigt je nach Uhrzeit einen anderen Text - in einer anderen Farbe (index.html, css/style.css) +- **Mini-Quiz** (quiz.html, js/quiz.js): + - 3 interaktive Fragen zu Web-Entwicklung und PH Weingarten + - Direktes Feedback für jede Antwort (richtig/falsch) + - Punktezähler und Auswertung am Ende + - Responsive Design mit ansprechender Benutzerführung + - Verlinkt in der Navigation unter "Übungen" + --- ## Tech-Stack diff --git a/components/navbar.html b/components/navbar.html index f8b4891..0ca749b 100644 --- a/components/navbar.html +++ b/components/navbar.html @@ -16,6 +16,7 @@
  • Textanalyse
  • Notenrechner (DOM)
  • Kanban Board
    • +
  • Mini-Quiz
  • PDF ↓
    • diff --git a/css/style.css b/css/style.css index 45ba275..647cedc 100644 --- a/css/style.css +++ b/css/style.css @@ -1,5 +1,17 @@ /* ====================== BEGRUESSUNG NACH TAGESZEIT ====================== */ +#begruessung { + font-size: 2.5rem; + font-weight: 700; + text-align: center; + padding: 2rem 1rem; + margin: 1rem 0; + background: rgba(255, 255, 255, 0.9); + border-radius: 12px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + transition: all 0.5s ease; +} + .morgen { color: #d97706; } /* warmes Orange */ .tag { color: #16a34a; } /* frisches Grün */ .abend { color: #4338ca; } /* tiefes Blau */ @@ -2137,6 +2149,197 @@ body.dark .kinetic-btn:hover { margin-left: 1.5rem; } +/* ====================== QUIZ STYLES ====================== */ + +.quiz-container { + background: white; + border-radius: 16px; + padding: 2rem; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); + max-width: 700px; + margin: 2rem auto; +} + +.quiz-question { + animation: slideIn 0.3s ease; +} + +@keyframes slideIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.question-counter { + display: inline-block; + background: #667eea; + color: white; + padding: 0.5rem 1rem; + border-radius: 20px; + font-size: 0.9rem; + font-weight: 600; + margin-bottom: 1rem; +} + +.quiz-question h2 { + font-size: 1.5rem; + color: #0f172a; + margin: 1.5rem 0; + line-height: 1.4; +} + +.quiz-answers { + display: grid; + gap: 1rem; + margin: 2rem 0; +} + +.answer-btn { + padding: 1rem 1.5rem; + border: 2px solid #e2e8f0; + background: white; + color: #1e293b; + border-radius: 12px; + font-size: 1rem; + cursor: pointer; + transition: all 0.3s ease; + text-align: left; + font-weight: 500; +} + +.answer-btn:hover:not(:disabled) { + border-color: #667eea; + background: rgba(102, 126, 234, 0.05); + transform: translateX(4px); +} + +.answer-btn:disabled { + cursor: not-allowed; +} + +.answer-btn.correct { + background: #dcfce7; + border-color: #16a34a; + color: #15803d; +} + +.answer-btn.incorrect { + background: #fee2e2; + border-color: #dc2626; + color: #991b1b; +} + +.feedback { + padding: 1rem; + border-radius: 12px; + font-weight: 600; + font-size: 1.1rem; + text-align: center; + animation: popIn 0.4s ease; +} + +@keyframes popIn { + 0% { + opacity: 0; + transform: scale(0.8); + } + 100% { + opacity: 1; + transform: scale(1); + } +} + +.feedback.correct { + background: #dcfce7; + color: #15803d; + border: 2px solid #16a34a; +} + +.feedback.incorrect { + background: #fee2e2; + color: #991b1b; + border: 2px solid #dc2626; +} + +.quiz-progress { + margin-top: 2rem; + padding-top: 1.5rem; + border-top: 1px solid #e2e8f0; +} + +.progress-bar { + width: 100%; + height: 8px; + background: #e2e8f0; + border-radius: 10px; + overflow: hidden; + margin-bottom: 1rem; +} + +.progress-fill { + height: 100%; + background: linear-gradient(90deg, #667eea, #764ba2); + transition: width 0.4s ease; +} + +.points-display { + text-align: center; + color: #64748b; + font-size: 0.95rem; +} + +.points-display strong { + color: #667eea; + font-size: 1.1rem; +} + +.quiz-result { + background: white; + border-radius: 16px; + padding: 2rem; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); + max-width: 700px; + margin: 2rem auto; + text-align: center; +} + +.quiz-result h2 { + font-size: 2rem; + color: #0f172a; + margin-bottom: 1rem; +} + +#result-text { + font-size: 1.2rem; + color: #475569; + line-height: 1.8; + margin: 1.5rem 0; +} + +/* ====================== RESPONSIVE QUIZ ====================== */ + +@media (max-width: 768px) { + .quiz-container, + .quiz-result { + padding: 1.5rem; + margin: 1rem; + } + + .quiz-question h2 { + font-size: 1.2rem; + } + + .answer-btn { + padding: 0.8rem 1rem; + font-size: 0.95rem; + } +} + .exercise-card table { width: 100%; border-collapse: collapse; diff --git a/index.html b/index.html index 314b12c..2cd1eb7 100644 --- a/index.html +++ b/index.html @@ -10,8 +10,6 @@ -

    -
    @@ -28,6 +26,7 @@ Website!

    Ein interaktives Lernprojekt im Bereich der Web-Entwicklung

    +

    Scroll zum Erkunden @@ -107,5 +106,27 @@ + + \ No newline at end of file diff --git a/js/quiz.js b/js/quiz.js new file mode 100644 index 0000000..2621f09 --- /dev/null +++ b/js/quiz.js @@ -0,0 +1,162 @@ +// ====================== QUIZ DATA ====================== + +const quizData = [ + { + frage: "Welche Aufgabe hat HTML bei der Web-Entwicklung?", + antworten: [ + { text: "Struktur und Inhalte der Webseite", korrekt: true }, + { text: "Design und visuelle Gestaltung", korrekt: false }, + { text: "Interaktivität und dynamisches Verhalten", korrekt: false } + ] + }, + { + frage: "Wo an der PH Weingarten findet die Lehrveranstaltung 'Entwicklung interaktiver Softwareanwendungen' statt?", + antworten: [ + { text: "Universität Konstanz", korrekt: false }, + { text: "PH Weingarten", korrekt: true }, + { text: "Universität Stuttgart", korrekt: false } + ] + }, + { + frage: "Mit welcher Methode kannst du auf ein HTML-Element zugreifen, wenn du seine ID kennst?", + antworten: [ + { text: "document.getElementByName()", korrekt: false }, + { text: "document.getElementById()", korrekt: true }, + { text: "document.selectElement()", korrekt: false } + ] + } +]; + +// ====================== QUIZ STATE ====================== + +let currentQuestion = 0; +let points = 0; +let answeredQuestions = new Set(); + +// ====================== INIT ====================== + +function initQuiz() { + currentQuestion = 0; + points = 0; + answeredQuestions = new Set(); + displayQuestion(); +} + +// ====================== DISPLAY QUESTION ====================== + +function displayQuestion() { + const container = document.getElementById('quiz-container'); + const resultContainer = document.getElementById('quiz-result'); + + // Quiz beendet + if (currentQuestion >= quizData.length) { + container.style.display = 'none'; + resultContainer.style.display = 'block'; + displayResult(); + return; + } + + // Frage anzeigen + resultContainer.style.display = 'none'; + container.style.display = 'block'; + + const question = quizData[currentQuestion]; + + container.innerHTML = ` +
    +
    Frage ${currentQuestion + 1} von ${quizData.length}
    +

    ${question.frage}

    + +
    + ${question.antworten.map((antwort, index) => ` + + `).join('')} +
    + + + +
    +
    +
    +
    +

    Punkte: ${points}/${quizData.length}

    +
    +
    + `; +} + +// ====================== ANSWER QUESTION ====================== + +function answerQuestion(answerIndex) { + // Verhindere mehrfaches Antworten bei gleicher Frage + if (answeredQuestions.has(currentQuestion)) { + return; + } + answeredQuestions.add(currentQuestion); + + const question = quizData[currentQuestion]; + const selectedAnswer = question.antworten[answerIndex]; + const feedbackEl = document.getElementById('feedback'); + const buttons = document.querySelectorAll('.answer-btn'); + + // Buttons deaktivieren + buttons.forEach(btn => btn.disabled = true); + + // Feedback geben + if (selectedAnswer.korrekt) { + points++; + feedbackEl.textContent = '✅ Richtig!'; + feedbackEl.className = 'feedback correct'; + buttons[answerIndex].classList.add('correct'); + } else { + feedbackEl.textContent = `❌ Falsch! Die richtige Antwort ist: "${question.antworten.find(a => a.korrekt).text}"`; + feedbackEl.className = 'feedback incorrect'; + buttons[answerIndex].classList.add('incorrect'); + + // Richtige Antwort auch als grün markieren + const correctIndex = question.antworten.findIndex(a => a.korrekt); + buttons[correctIndex].classList.add('correct'); + } + + feedbackEl.style.display = 'block'; + + // Nächste Frage nach Verzögerung + setTimeout(() => { + currentQuestion++; + displayQuestion(); + }, 2000); +} + +// ====================== DISPLAY RESULT ====================== + +function displayResult() { + const resultText = document.getElementById('result-text'); + const percentage = Math.round((points / quizData.length) * 100); + + let message = ''; + if (points === quizData.length) { + message = `🌟 Perfekt! Du hast alle ${quizData.length} Fragen richtig beantwortet!`; + } else if (points >= quizData.length * 0.66) { + message = `👍 Sehr gut! Du hast ${points} von ${quizData.length} Fragen richtig (${percentage}%).`; + } else if (points >= quizData.length * 0.33) { + message = `📚 Okay! Du hast ${points} von ${quizData.length} Fragen richtig (${percentage}%). Mehr lernen hilft!`; + } else { + message = `💪 Nicht so schlecht! Du hast ${points} von ${quizData.length} Fragen richtig (${percentage}%). Nächstes Mal besser!`; + } + + resultText.textContent = message; +} + +// ====================== RESTART QUIZ ====================== + +document.addEventListener('DOMContentLoaded', function() { + const restartBtn = document.getElementById('restart-btn'); + if (restartBtn) { + restartBtn.addEventListener('click', initQuiz); + } + + // Quiz starten + initQuiz(); +}); diff --git a/js/script.js b/js/script.js index e58babb..39be232 100644 --- a/js/script.js +++ b/js/script.js @@ -1,21 +1,25 @@ // ====================== BEGRUESSUNG NACH TAGESZEIT ====================== -const stunde = new Date().getHours(); -const el = document.getElementById('begruessung'); -let text; +document.addEventListener('DOMContentLoaded', function() { + const stunde = new Date().getHours(); + const el = document.getElementById('begruessung'); + let text; -if (stunde < 10) { - text = 'Guten Morgen!'; - el.classList.add('morgen'); -} else if (stunde < 18) { - text = 'Hallo, schön dass du da bist!'; - el.classList.add('tag'); -} else { - text = 'Guten Abend!'; - el.classList.add('abend'); -} + if (el) { + if (stunde < 10) { + text = 'Guten Morgen!'; + el.classList.add('morgen'); + } else if (stunde < 18) { + text = 'Hallo, schön dass du da bist!'; + el.classList.add('tag'); + } else { + text = 'Guten Abend!'; + el.classList.add('abend'); + } -el.textContent = text; + el.textContent = text; + } +}); // ====================== CONTACT FORM VALIDATION ====================== diff --git a/kanban.html b/kanban.html index 04f02f2..05807b5 100644 --- a/kanban.html +++ b/kanban.html @@ -12,6 +12,8 @@ + +

    📊 Kanban Board

    diff --git a/quiz.html b/quiz.html new file mode 100644 index 0000000..da3b7af --- /dev/null +++ b/quiz.html @@ -0,0 +1,55 @@ + + + + + + + Mini-Quiz - EIS Projekt + + + + + + +
    +
    +

    🧠 EIS Mini-Quiz

    +

    Teste dein Wissen über Web-Entwicklung und unsere PH Weingarten!

    + +
    + +
    + + +
    +
    + + + + + + + +