HTML minispiel?
Hallo zusammen, ich soll bis morgen ein Minispiel oder ein Quiz für den Info Unterricht "Programmieren" dazu soll ich JavaScript und Html 5 verwenden. Jedoch hab ich absolut keine Ahnung von dem superinteressanten Fach. Kann mir jemand netterweise einer der beiden oben genannten dinge irgendwie erstellen, aber so dass es aussieht als wenn ein Durchschnittlicher 10. Klässler dies gemacht hat. Vielen Dank!
2 Antworten
Die Seite finde ich hilfreich, sogar auf deutsch: https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Spiele
Vielleicht ein bisschen variieren, besonders den Stil. Ein HTML-Formular als Quiz sollte nicht allzu schwer sein.
https://www.youtube.com/@Programmierenlernen/videos
Könnte zum Beispiel helfen.
Wieso habt ihr denn so etwas zu erstellen?
Vor allem wenn man sich damit gar nicht auskennt.
Nun, wenn man es nicht kennt und kann. Dann kann
auch nicht verlangt werden das man so etwas erstellt.
Kannst du selbst machen. Kann man ja nicht erzwingen wenn man es nie gelernt hat.
also von nicht gelernt kann man nicht reden, er hat uns schon 2-3 unterrichts einheiten einen crash-kurs gegeben, aber er hat einfach ein immenses tempo dabei
Nun was hilft es dir den Code zu haben, wenn du ihn am Ende nicht erklären kannst
ich werde es nicht erklären müssen, denn die schüler die bereits in seinem Kurs waren meinen dass er es "einsammelt" und bewertet
<!DOCTYPE html>
<html>
<head>
<title>Quiz</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: #333;
}
#question {
margin: 20px 0;
}
#choices {
margin-bottom: 20px;
}
#choices input {
margin: 5px;
}
#submit {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 4px;
}
#result {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div id="question">Frage:</div>
<div id="choices">
<input type="radio" name="answer" value="A"> Antwort A<br>
<input type="radio" name="answer" value="B"> Antwort B<br>
<input type="radio" name="answer" value="C"> Antwort C<br>
<input type="radio" name="answer" value="D"> Antwort D<br>
</div>
<button id="submit">Antwort überprüfen</button>
<div id="result"></div>
<script src="script.js"></script>
</body>
</html>
window.addEventListener('DOMContentLoaded', function() {
var question = document.getElementById('question');
var choices = document.getElementsByName('answer');
var submitButton = document.getElementById('submit');
var result = document.getElementById('result');
var quizData = [
{
question: "Frage 1: Was ist die Hauptfunktion von JavaScript?",
choices: {
A: "Bilder anzeigen",
B: "Programme schreiben",
C: "Videos abspielen",
D: "Dokumente formatieren"
},
correctAnswer: "B"
},
{
question: "Frage 2: Was ist HTML?",
choices: {
A: "Eine Programmiersprache",
B: "Ein Texteditor",
C: "Ein Betriebssystem",
D: "Eine Auszeichnungssprache"
},
correctAnswer: "D"
},
// Weitere Fragen hier einfügen...
];
var currentQuestion = 0;
var score = 0;
function showQuestion() {
question.textContent = quizData[currentQuestion].question;
for (var i = 0; i < choices.length; i++) {
choices[i].value = quizData[currentQuestion].choices[choices[i].value];
choices[i].checked = false;
}
}
function checkAnswer() {
var selectedAnswer = "";
for (var i = 0; i < choices.length; i++) {
if (choices[i].checked) {
selectedAnswer = choices[i].value;
break;
}
}
if (selectedAnswer === quizData[currentQuestion].correctAnswer) {
score++;
result.textContent = "Richtig!";
} else {
result.textContent = "Falsch!";
}
currentQuestion++;
if (currentQuestion < quizData.length) {
showQuestion();
} else {
// Keine weiteren Fragen vorhanden, zeige Endergebnis
question.textContent = "Quiz beendet!";
choices.forEach(function(choice) {
choice.style.display = "none";
});
submitButton.style.display = "none";
result.textContent = "Du hast " + score + " von " + quizData.length + " Fragen richtig beantwortet.";
}
}
submitButton.addEventListener('click', checkAnswer);
showQuestion();
});
danke, unsere kurse wurden zusammengeteckt da mein Infolehrer sich den arm brach und jetzt in rente ist, dieser lehrer war aber nur mit exel beschäftigt und wir ebenso