• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Quiz für lokale Webseite

H

HTMLraphi

Neues Mitglied
Hallo liebe Community!

Ich arbeite gerade an einer schulinternen Webseite zum Mathe üben.
Neben Videos und Aufgaben soll diese Webseite auch Teste enthalten.
Ich bin schon lange auf der Suche nach einen passenden Editor, aber ich finde nur Editoren und Scripte, welche nur online funktionieren.
Weis vielleicht jemand von euch einen Editor, bzw. Einen einfachen HTML Script?
Also der Test würde immer nur eine Frage enthalten mit einem Bild
Und 4 Antwortsmöglichkeiten, wobei eine richtig ist. Am Ende wäre noch schön, wenn eine kleine Auswertung wäre, ob die Frage richtig beantwortet worden ist.
Liebe Grüße.
 
HTML alleine wird dir da nicht weiterhelfen, da brauchst du eine serverseitige Scriptsprache w.z.B. PHP
 
Ein Skript kann ich dir anbieten, ich habe es aus irgend einem Forum, wo ich jemand geholfen habe, es zu modifizieren:
HTML: 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<!-- Paste this code into the HEAD section of your HTML document.
You may need to change the path of the file. -->
<script type="text/javascript" src="quiz_functions.js"></script>
<!-- Paste this code into the HEAD section of your HTML document.
You may need to change the path of the file. -->
<script type="text/javascript" src="quiz_config.js"></script>
</head>

<body>
<div id="seite">
<!-- Paste this code into the BODY section of your HTML document -->
<h1>Fischerkennung<br />
<br />
</h1>
<script type="text/javascript">
function renderQuiz() {
document.writeln('<div id="seite" style="display: table-cell; vertical-align: top">');
for(i=0;i<questions.length;i++) {
document.writeln('<span style="display: inline-block; vertical-align: top;">');
document.writeln('<br><img src="' + images[i] + '" style="border:0" alt="" /><br>');
document.writeln('<span class="question" style="margin-top: 0; padding-top: 0;">' + questions[i] + ' <span id="result_' + i + '"><img src="blank.gif" style="border:0" alt="" /></span></span><br>');
for(j=0;j<choices[i].length;j++) {
document.writeln('<input type="radio" name="answer_' + i + '" value="' + choices[i][j] + '" id="answer_' + i + '_' + j + '" class="question_' + i + '" onclick="submitAnswer(' + i + ', this, \'question_' + i + '\', \'label_' + i + '_' + j + '\')" /><label id="label_' + i + '_' + j + '" for="answer_' + i + '_' + j + '"> ' + choices[i][j] + '</label><br />');
}
document.writeln('</span>');
}
document.writeln('</div><br>');
document.writeln('<p><input type="submit" value="Show Score" onclick="showScore()" /> <input type="submit" value="Reset Quiz" onclick="resetQuiz(true)" /></p><p style="display:none"><img src="correct.gif" style="border:0" alt="Correct!" /><img src="incorrect.gif" style="border:0" alt="Incorrect!" /></p>');
}

renderQuiz();
</script>
<div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div>
</p></p>
</div>
</body>
</html>

quiz_config.js:
Code: 
/*-- Paste this code into an external JavaScript file named: quiz_config.js */

/* This script and many more are available free online at
The JavaScript Source :: http://www.javascriptsource.com
Created by: James Crooke :: http://www.cj-design.com */

var questions = new Array();
var choices = new Array();
var answers = new Array();
var response = new Array();
var images = new Array();


images[0] = "images/dia0.jpg";
images[1] = "images/dia1.jpg";
images[2] = "images/dia2.jpg";
images[3] = "images/dia3.jpg";
images[4] = "images/dia4.jpg";
images[5] = "images/dia5.jpg";

// To add more questions, just follow the format below.

questions[0] = "1) Welcher Fisch ist das?";
choices[0] = new Array();
choices[0][0] = "Aal";
choices[0][1] = "Aland";
choices[0][2] = "Amerikanischer Flusskrebs";
choices[0][3] = "Äsche";
choices[0][4] = "Bach-/Flussneunauge";
choices[0][5] = "Bachforelle";
choices[0][6] = "Bachsaibling";
choices[0][7] = "Barbe";
choices[0][8] = "Bitterling";
choices[0][9] = "Brassen";
choices[0][10] = "Döbel";
choices[0][11] = "Dorsch (Kabeljau)";
choices[0][12] = "Dreistachliger Stichling";
choices[0][13] = "Elritze";
choices[0][14] = "Europäischer Flusskrebs";
choices[0][15] = "Flunder";
choices[0][16] = "Flussbarsch";
choices[0][17] = "Giebel";
choices[0][18] = "Gründling";
choices[0][19] = "Güster";
choices[0][20] = "Hasel";
choices[0][21] = "Hecht";
choices[0][22] = "Karausche";
choices[0][23] = "Kaulbarsch";
choices[0][24] = "Kesselgrundel";
choices[0][25] = "Lachs";
choices[0][26] = "Maifisch";
choices[0][27] = "Makrele";
choices[0][28] = "Meerforelle";
choices[0][29] = "Moderlieschen";
choices[0][30] = "Mühlkoppe (Groppe)";
choices[0][31] = "Nase";
choices[0][32] = "Quappe";
choices[0][33] = "Rapfen";
choices[0][34] = "Regenbogenforelle";
choices[0][35] = "Rotauge";
choices[0][36] = "Rotfeder";
choices[0][37] = "Schlammpeitzger";
choices[0][38] = "Schleie";
choices[0][39] = "Schmerle";
choices[0][40] = "Schnäpel";
choices[0][41] = "Schneider";
choices[0][42] = "Steinbeißer";
choices[0][43] = "Ukelei";
choices[0][44] = "Wels";
choices[0][45] = "Wildkarpen";
choices[0][46] = "Zander";
choices[0][47] = "Zährte";
choices[0][48] = "Zwergstichling";
answers[0] = choices[0][0];

questions[1] = "2) JavaScript is ...";
choices[1] = new Array();
choices[1][0] = "subjective";
choices[1][1] = "objective";
choices[1][2] = "evil";
choices[1][3] = "object based";
answers[1] = choices[1][3];

questions[2] = "3) To comment out a line in JavaScript ...";
choices[2] = new Array();
choices[2][0] = "Precede it with two forward slashes, i.e. '//'";
choices[2][1] = "Precede it with an asterisk and a forward slash, i.e. '*/'";
choices[2][2] = "Precede it with an asterisk, i.e. '*'";
choices[2][3] = "Precede it with a forward slash and an asterisk, i.e. '/*'";
answers[2] = choices[2][0];

questions[3] = "4) JavaScript can only run on Windows";
choices[3] = new Array();
choices[3][0] = "True";
choices[3][1] = "False";
answers[3] = choices[3][1];

questions[4] = "5) Semicolons are optional at the end of a JavaScript statement.";
choices[4] = new Array();
choices[4][0] = "True";
choices[4][1] = "False";
answers[4] = choices[4][0];

questions[5] = "6) The four basic data types are:";
choices[5] = new Array();
choices[5][0] = "strings, numbers, BooBoos, and nulls";
choices[5][1] = "strings, text, Booleans, and nulls";
choices[5][2] = "strings, numbers, Booleans, and nulls";
choices[5][3] = "strings, numbers, Booleans, and zeros";
answers[5] = choices[5][2];

// response for getting 100%
response[0] = "Excellent, top marks!";
// response for getting 90% or more
response[1] = "Excellent, try again to get 100%!"
// response for getting 70% or more
response[2] = "Well done, that is a good score, can you do better?";
// response for getting over 50%
response[3] = "Nice one, you got more than half of the questions right, can you do better?";
// response for getting 40% or more
response[4] = "You got some questions right, you can do better!";
// response for getting 20% or more
response[5] = "You didn't do too well, why not try again!?";
// response for getting 10% or more
response[6] = "That was pretty poor! Try again to improve!";
// response for getting 9% or less
response[7] = "Oh dear, I think you need to go back to school (or try again)!";

quiz_functions.js:
Code: 
<!-- Paste this code into an external JavaScript file named: quiz_functions.js -->

/* This script and many more are available free online at
The JavaScript Source :: http://www.javascriptsource.com
Created by: James Crooke :: http://www.cj-design.com */

var useranswers = new Array();
var answered = 0;

function renderQuiz() {
for(i=0;i<questions.length;i++) {
document.writeln('<p class="question">' + questions[i] + ' <span id="result_' + i + '"><img src="blank.gif" style="border:0" alt="" /></span></p>');
for(j=0;j<choices[i].length;j++) {
document.writeln('<input type="radio" name="answer_' + i + '" value="' + choices[i][j] + '" id="answer_' + i + '_' + j + '" class="question_' + i + '" onclick="submitAnswer(' + i + ', this, \'question_' + i + '\', \'label_' + i + '_' + j + '\')" /><label id="label_' + i + '_' + j + '" for="answer_' + i + '_' + j + '"> ' + choices[i][j] + '</label><br />');
}
}
document.writeln('<p><input type="submit" value="Show Score" onclick="showScore()" /> <input type="submit" value="Reset Quiz" onclick="resetQuiz(true)" /></p><p style="display:none"><img src="correct.gif" style="border:0" alt="Correct!" /><img src="incorrect.gif" style="border:0" alt="Incorrect!" /></p>');
}
function resetQuiz(showConfirm) {
if(showConfirm)
if(!confirm("Are you sure you want to reset your answers and start from the beginning?"))
return false;
document.location = document.location;
}
function submitAnswer(questionId, obj, classId, labelId) {
useranswers[questionId] = obj.value;
document.getElementById(labelId).style.fontWeight = "bold";
disableQuestion(classId);
showResult(questionId);
answered++;
}
function showResult(questionId) {
if(answers[questionId] == useranswers[questionId]) {
document.getElementById('result_' + questionId).innerHTML = '<img src="correct.gif" style="border:0" alt="Correct!" />';
} else {
document.getElementById('result_' + questionId).innerHTML = '<img src="incorrect.gif" style="border:0" alt="Incorrect!" />';
}
}
function showScore() {
if(answered != answers.length) {
alert("You have not answered all of the questions yet!");
return false;
}
questionCount = answers.length;
correct = 0;
incorrect = 0;
for(i=0;i<questionCount;i++) {
if(useranswers[i] == answers[i])
correct++;
else
incorrect++;
}
pc = Math.round((correct / questionCount) * 100);
alertMsg = "You scored " + correct + " out of " + questionCount + "\n\n";
alertMsg += "You correctly answered " + pc + "% of the questions! \n\n";
if(pc == 100)
alertMsg += response[0];
else if(pc >= 90)
alertMsg += response[1];
else if(pc >= 70)
alertMsg += response[2];
else if(pc > 50)
alertMsg += response[3];
else if(pc >= 40)
alertMsg += response[4];
else if(pc >= 20)
alertMsg += response[5];
else if(pc >= 10)
alertMsg += response[6];
else
alertMsg += response[7];
if(pc < 100) {
if(confirm(alertMsg))
resetQuiz(false);
else
return false;
} else {
alert(alertMsg);
}
}
function disableQuestion(classId) {
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++) {
if (alltags[i].className == classId) {
alltags[i].disabled = true;
}
}
}
Nicht das modernste, aber es funktionierte. Es würde sich anbieten, die Codegenerierung mit document.write auf PHP umzustellen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben