✔ Javascript Auswertung Quiz

blackybaby · 20. März 2017

Hallo zusammen

Bin noch sehr neu was javascript betrifft und mache grad einen Kurs und hab darin folgende Aufgabe bekommen:

auf einer Seite gibt es ein Quiz bestehend aus 6 Bildern von Sehenswürdigkeiten. Ein kleines Formular stellt zwei Fragen, die vom Benutzer beantwortet werden können. Unten wird die aktuelle Ortszeit anhand der Systemzeit ausgerechnet und abgebildet. Beim Klick auf den Link oder Button werden die Antworten ausgewertet und man kann die nächste Quizfrage beantworten. Am Ende sollen die richtigen Antworten addiert werden. Die Programmierung möglichst vollständig mit JavaScript.

Hier noch der Link zur momentanen Seite die ich aufgebaut habe:
https://becca.r2it.de/abschlusspruefung/dateien/reisequiz.php
https://becca.r2it.de/abschlusspruefung/dateien/reisequiz.php
Hinter reisequiz einfach noch die Zahlen 2 -6 einfügen dann erscheinen die anderen Seiten vom Quiz.

Mein Problem nun wie kann ich diese Antworten mit JavaScript abfragen asuwerten und dann weiterleiten zur nächsten Seite. Bin da komplett am Anfang vom Lernen und hab heute schon google stundenlang auf den Kopf gestellt.
Wäre schön wenn ihr mir anhand eines Scripts das zeigen und vielleicht ein wenig erklären könnt, damit ich dies auch verstehe und auch mal öfter dann anwenden kann und evtl. wenn ich mehr gelernt habe ausbaun kann.

Hier noch der Code zur Reisequiz Seite:

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reiseb&uuml;ro Bauer</title>
<link href="../css/stylereisebuero.css" rel="stylesheet" type="text/css" />



</head>

<body>
<div id="gesamt"><!--Anfang DIV Gesamt-->
<div id="kopf"><!--Anfang DIV Kopf-->
<div id="kopf_name"><img src="../images/logo.png" width="229" height="128" alt=""/></div>
</div><!--Ende DIV Kopf-->
<div id="nav"><!--Anfang DIV Nav-->
<ul id="navigation">
<li><a href="../index.htm" class="aktuell">Startseite</a></li>
   <li><a href="reiseziele.htm">Reiseziele</a>
   <ul id="reiseziele2">
       <li><a href="#">T&uuml;rkei</a></li>
       <li><a href="#">Indien</a></li>
   <li><a href="#">&Auml;gypten</a></li>
    <li><a href="#">China</a></li>
       </ul>
   </li>
<li><a href="fluege.htm">Fl&uuml;ge</a></li>
<li><a href="hotels.htm">Hotels</a></li>
<li><a href="kreuzfahrten.htm">Kreuzfahrten</a></li>
<li><a href="ueberuns.htm"><span xml:lang="en">&Uuml;ber uns</span></a></li>
<li><a href="reisequiz.php">Reisequiz</a></li>
<li><a href="kontakt.htm">Kontakt</a></li>
<li><a href="gaestebuch.htm">G&auml;stebuch</a></li>
</ul>
</div><!--Ende DIV Nav-->
<div id="haupt"><!--Anfang DIV Haupt-->
<div id="info">
  <h3>Kontakt</h3>
   <h2><u>&Ouml;ffnungszeiten:</u></h2>
   <p>Mo. - Fr.: 09:00 Uhr bis 13 Uhr<br />
   und 14:00 Uhr bis 18:00 Uhr<br />
Samstag: 09:00 Uhr bis 13:00 Uhr</p>
<p>Gerne auch außerhalb der &Ouml;ffnungszeiten nach Terminvereinbarung!</p>
   <h2><u>Kontaktdaten:</u></h2>
   <p>Max Mustermann Strasse 10<br />
   12345 Musterstadt<br />
   Tel.: 01234/5678912<br />
   Fax: 01234/5678900<br />
       E-Mail:<a href="mailto:rbbauer@musterstadt.de">rbbauer@musterstadt.de</a></p>
       <p>Wir beraten Sie gerne und freuen uns auf Ihren Besuch!</p>
   
</div>


<div id="inhalt"><!---- Anfang DIV Inhalt-->
<div id="quiz"><!-- Anfang DIV Quiz-->
   
   <img class="moschee" src="../images/BlaueMoschee_Michael Brüggemann_pixelio.jpg" width="400" height="300" alt=""/><br />
   <form>
   <br />
   <h2>In welcher Stadt steht diese Sehensw&uuml;rdigkeit?</h2>
<input name="eingabe1" type="text" id="antwort1" value="Geben Sie hier Ihre Antwort ein" size="48" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if (this.value=='') this.value=this.defaultValue;" /><br /><br />
<h2>Wieviele Einwohner hat die Stadt?</h2>
<input name="eingabe2" type="text" id="antwort2" value="Geben Sie hier Ihre Antwort ein" size="48" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;" /><br />
<br />
   <?php
       date_default_timezone_set('Europe/Istanbul');
   $timestamp = time();
   $datum = date("H:i", $timestamp);
   echo "<b>Dort ist es momentan $datum Uhr</b>";
   ?>
   <br /><br />
   <input class="button" name="senden" type="submit" value="Auswertung" onClick="auswerten()" />
   
   
   </form>
   
    </div><!-- Ende DIV Quiz -->
   </div><!--Ende DIV Inhalt-->
   
   </div><!--Ende DIV Haupt-->
   <div class="fett" id="fuss">
<div id="bg_fuss">Bauer &copy; 2017</div>
</div>
   </div><!--Ende DIV Gesamt-->

   
   </body>
</html>

Bedanke mich schon mal bei allen die mir helfen.

LG
blackybaby

Sempervivum · 20. März 2017

Da es sich nur um eine Übungsaufgabe handelt und Du schreibst, dass es komplett mit Javascript realisiert werden soll, würde ich zwei Hinweisfelder hinzu fügen und die Funktion auswerten etwa wie folgt aufbauen:

Code:

    <input class="button" name="senden" type="button" value="Auswertung" onclick="auswerten()" />
    <div id="hinweisfalsch">Das ist falsch. Bitte korrigieren Sie ihre Antwort(en).</div>
    <div id="hinweisrichtig">Das ist richtig.<br />
        <a href="frage2.html">Zur nächsten Frage</a>
    </div>
    <style>
        #hinweisfalsch, #hinweisrichtig {
            display: none;
        }
    </style>
    <script>
        function auswerten() {
            var einwohner = parseInt(antwort2.value);
            // Ein Element steht unter einer globalen Variablen zu Verfügung,
            // die den selben Namen wie sein ID hat

            // Prüfen, ob die Antworten richtig sind
            if (antwort1.value == "Istanbul" && einwohner > 14000000 && einwohner < 16000000) {
                // Richtige Antworten
                // Entspr. Hinweistexte einblenden
                hinweisrichtig.style.display = "block";
            } else {
                // Falsche Antwort(en)
                // Entspr. Hinweistext einblenden
                hinweisfalsch.style.display = "block";
            }
        }
    </script>

Bei solch einer Lösung ist es leicht, zu schummeln, weil man die Antworten aus dem Quelltext ablesen kann. Um das zu unterbinden, müsste man die Antworten auf dem Server ablegen und mit Ajax vor der Auswertung einlesen.
Anstatt mehrere Seiten zu erzeugen könnte man die Bilder und die Fragen in einem Array ablegen und jeweils ohne Neuladen der Seite einblenden.

blackybaby · 20. März 2017

Danke schonmal für diese Hilfe, doch wie mach ich das dann mit der Punkteverteilung noch? Kannst mir da evtl auch noch helfen.
Finds klasse dass man hier so schnell Hilfe bekommt wirklich tausend dank

blackybaby · 20. März 2017

Hab das jetzt mal eingebaut, aber irgendwie funktioniert das noch nicht so ganz. Kannst mal drüber schaun?

https://becca.r2it.de/abschlusspruefung/dateien/reisequiz.php

Er zeigt mir die Auswertung nur ganz kurz an und dann kommt auch nicht die Weiterleitung zur 2. Seite vom Quiz

Sempervivum · 20. März 2017

Kann ich nicht reproduzieren. Wenn ich auf "Auswerten" drücke und die Antworten sind richtig, wird angezeigt "Das ist richtig. Zur nächsten Frage." Und wenn ich auf das zweite klicke, erscheint die Seite mit der nächsten Frage.

Sempervivum · 20. März 2017

doch wie mach ich das dann mit der Punkteverteilung noch?

Richtig, daran habe ich gar nicht gedacht. Das ist etwas kompliziert, weil jedesmal eine neue Seite geladen wird. Eine Möglichkeit ist, die Punkte als URL-Parameter an die nächste Seite zu übergeben: reisequiz2.php?score=1

blackybaby · 20. März 2017

sorry das mit vorhin hab ich hinbekommen. Kann man die Punkteauswertung dann auf einer Extraseite, die sich sagen wir mal quizauswertung heisst, ausgeben lassen wenn ich nach der letzten Quizseite auf den Link unten klicke? Gibts da ne Möglichkeit?

abdellaui · 20. März 2017

Falls du nur reines Javascript verwenden und die Auswertung ebenso auf Javascript basieren soll so verwende dieses hier:

Vorteile:
Alles geschiet auf einer Seite.

Nachteile:
Die Antworten sind leicht findbar. (Lösung: hashen)

JS:

Code:

(function(){
var quiz = 1;
var richtigeAntworten = 0;
var $ = function(id){
   return document.getElementById(id);
}
function addZero(i) {
    if(i < 10) {i = "0" + i;}
    return i;
}
function zeitAngabe(){
   console.log('a');
   var utcUnterschied = [
  3,  /* ORT 1  Zeitverschiebung: UTC/GMT +3 Stunden */
  -3,  /* ORT 2 */
  5,  /* ORT 3 */
  6,  /* ORT 4 */
  8,  /* ORT 5 */
  -10,  /* ORT 6 */
  ];
   var uhrzeit = new Date();
   var uhrzeitUtc = new Date(uhrzeit.getUTCFullYear(), uhrzeit.getUTCMonth(), uhrzeit.getUTCDate(), (uhrzeit.getUTCHours()+utcUnterschied[quiz-1]), uhrzeit.getUTCMinutes(), uhrzeit.getUTCSeconds());
   $('zeit').innerHTML = 'Dort ist es momentan  '+addZero(uhrzeitUtc.getHours())+':'+addZero(uhrzeitUtc.getMinutes())+':'+addZero(uhrzeitUtc.getSeconds())+' Uhr.';

}
function quizBauen(){
   var quizBilder = [
  'https://becca.r2it.de/abschlusspruefung/images/BlaueMoschee_Michael%20Br%C3%BCggemann_pixelio.jpg',
  'https://becca.r2it.de/abschlusspruefung/images/Gizeh_Caroline%20Lang_pixelio.jpg',
  'https://becca.r2it.de/abschlusspruefung/images/Himmelstempel_Dieter%20Sch%C3%BCtz_pixelio.jpg',
  'https://becca.r2it.de/abschlusspruefung/images/Jesusstaue_Carlosh_pixelio.jpg',
  'https://becca.r2it.de/abschlusspruefung/images/OperSydney_Martin%20J%C3%A4ger_pixelio.jpg',
  'https://becca.r2it.de/abschlusspruefung/images/TajMahal_Paulwip_pixelio.jpg'
  ];
  var fragen = [
  "In welcher Stadt steht diese Sehenswürdigkeit?","Wie viele Einwohner hat die Stadt?",
  "In welcher Stadt steht diese Sehenswürdigkeit?","Wie viele Einwohner hat die Stadt?",
  "In welcher Stadt steht diese Sehenswürdigkeit?","Wie viele Einwohner hat die Stadt?",
  "In welcher Stadt steht diese Sehenswürdigkeit?","Wie viele Einwohner hat die Stadt?",
  "In welcher Stadt steht diese Sehenswürdigkeit?","Wie viele Einwohner hat die Stadt?",
  "In welcher Stadt steht diese Sehenswürdigkeit?","Wie viele Einwohner hat die Stadt?"
  ];
  zeitAngabe();
  frageIndex = (quiz-1)*2;
  $('frage1').innerHTML = fragen[frageIndex];
  $('frage1').innerHTML = fragen[frageIndex+1];
  $('auswerten').value='Auswertung';
  $('antwort1').value = 'Geben Sie hier Ihre Antwort ein';
  $('antwort2').value = 'Geben Sie hier Ihre Antwort ein';
  $('quizbild').src=quizBilder[quiz];
}
function auswerten(){
   if($('auswerten').value=='Auswertung'){
       quizIndex = (quiz-1)*2;
    var antworten = [
    'Istanbul','14,3',                              /* QUIZ 1 */
    'ANTWORT','ANTWORT',                           /* QUIZ 2 */
    'ANTWORT','ANTWORT',                           /* QUIZ 3 */
    'ANTWORT','ANTWORT',                           /* QUIZ 4 */
    'ANTWORT','ANTWORT',                           /* QUIZ 5 */
    'ANTWORT','ANTWORT'                             /* QUIZ 6 */
    ];
       if(antworten[quizIndex] == $('antwort1').value){
           $('antwort1').value = 'Richtig';
      richtigeAntworten++;
       }else{
           $('antwort1').value = 'Leider falsch';
       }
       
       if(antworten[quizIndex+1] == $('antwort2').value){
           $('antwort2').value = 'Richtig';
      richtigeAntworten++;
       }else{
           $('antwort2').value = 'Leider falsch';
       }
    if(quiz<5){
    $('auswerten').value='Nächste Quiz';
    }else{
    $('auswerten').value='Quiz auswerten!';
    }
    }else{
       if(quiz<5){
         quiz++;
           quizBauen();
      }else{
       $('quiz').innerHTML='<h2>Richtige Antworten: 12/'+richtigeAntworten+'</h2><br><input class="button"  type="submit" value="Neu staten" onclick="window.location.reload();" />';
      }
    }
}
$('auswerten').addEventListener('click',auswerten);
zeitAngabe();
window.setInterval(zeitAngabe,1000);
})();

HTML:

<div id="gesamt"><!--Anfang DIV Gesamt-->
<div id="kopf"><!--Anfang DIV Kopf-->
<div id="kopf_name"><img  src="../images/logo.png" width="229" height="128" alt=""/></div>
</div><!--Ende DIV Kopf-->
<div id="nav"><!--Anfang DIV Nav-->
<ul id="navigation">
<li><a href="../index.htm" class="aktuell">Startseite</a></li>
   <li><a href="reiseziele.htm">Reiseziele</a>
   <ul id="reiseziele2">
       <li><a href="#">T&uuml;rkei</a></li>
       <li><a href="#">Indien</a></li>
   <li><a href="#">&Auml;gypten</a></li>
    <li><a href="#">China</a></li>
       </ul>
   </li>
<li><a href="fluege.htm">Fl&uuml;ge</a></li>
<li><a href="hotels.htm">Hotels</a></li>
<li><a href="kreuzfahrten.htm">Kreuzfahrten</a></li>
<li><a href="ueberuns.htm"><span xml:lang="en">&Uuml;ber uns</span></a></li>
<li><a href="reisequiz.php">Reisequiz</a></li>
<li><a href="kontakt.htm">Kontakt</a></li>
<li><a href="gaestebuch.htm">G&auml;stebuch</a></li>
</ul>
</div><!--Ende DIV Nav-->
<div id="haupt"><!--Anfang DIV Haupt-->
<div id="info">
  <h3>Kontakt</h3>
   <h2><u>&Ouml;ffnungszeiten:</u></h2>
   <p>Mo. - Fr.: 09:00 Uhr bis 13 Uhr<br />
   und 14:00 Uhr bis 18:00 Uhr<br />
Samstag: 09:00 Uhr bis 13:00 Uhr</p>
<p>Gerne auch außerhalb der &Ouml;ffnungszeiten nach Terminvereinbarung!</p>
   <h2><u>Kontaktdaten:</u></h2>
   <p>Max Mustermann Strasse 10<br />
   12345 Musterstadt<br />
   Tel.: 01234/5678912<br />
   Fax: 01234/5678900<br />
       E-Mail:<a href="mailto:rbbauer@musterstadt.de">rbbauer@musterstadt.de</a></p>
       <p>Wir beraten Sie gerne und freuen uns auf Ihren Besuch!</p>
   
</div>
<div id="inhalt"><!---- Anfang DIV Inhalt-->
<div id="quiz"><!-- Anfang DIV Quiz-->
   
   <img class="moschee" id="quizbild" src="https://becca.r2it.de/abschlusspruefung/images/BlaueMoschee_Michael%20Br%C3%BCggemann_pixelio.jpg" width="400" height="300" alt=""/><br />
   <!--<form>-->
   <br />
   <h2 id="frage1">In welcher Stadt steht diese Sehensw&uuml;rdigkeit?</h2>
<input name="eingabe1" type="text" id="antwort1" value="Geben Sie hier Ihre Antwort ein" size="48" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if (this.value=='') this.value=this.defaultValue;" /><br /><br />
<h2 id="frage2">Wie viele Einwohner hat die Stadt?</h2>
<input name="eingabe2" type="text" id="antwort2" value="Geben Sie hier Ihre Antwort ein" size="48" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;" /><br />
<br />
<div id="zeit"></div>
   <br /><br />
   <input class="button" id="auswerten" name="senden" type="submit" value="Auswertung" />
   
   <!--</form>-->
   
    </div><!-- Ende DIV Quiz -->
   </div><!--Ende DIV Inhalt-->
   
   </div><!--Ende DIV Haupt-->
   <div class="fett" id="fuss">
<div id="bg_fuss">Bauer &copy; 2017</div>
</div>
   </div><!--Ende DIV Gesamt-->

Zusätzlich JSFIDDLE:
https://jsfiddle.net/5usdm0vs/

Sempervivum · 20. März 2017

Code:

Kann man die Punkteauswertung dann auf einer Extraseite, die sich sagen wir mal quizauswertung heisst, ausgeben lassen wenn ich nach der letzten Quizseite auf den Link unten klicke? Gibts da ne Möglichkeit?

Selbstverständlich. Du musst dann in dem href-Attribut nur die URL dieser Auswertungsseite angeben.

Hier der Code für die Übergabe mit URL-Parameter:

Code:

        var url = window.location.href;
        var parts = url.split("?score=");
        if (parts[1]) var score = parseInt(parts[1]); else var score = 0;
        function auswerten() {
            var einwohner = parseInt(antwort2.value);
            // Ein Element steht unter einer globalen Variablen zu Verfügung,
            // die den selben Namen wie sein ID hat

            // Prüfen, ob die Antworten richtig sind
            if (antwort1.value == "Istanbul" && einwohner > 14000000 && einwohner < 16000000) {
                // Richtige Antworten
                // Entspr. Hinweistexte einblenden
                hinweisrichtig.style.display = "block";
                score++;
                hrefnext.href = hrefnext.href.replace(/\?score=[0-9]+/, "?score=" + score);
            } else {
                // Falsche Antwort(en)
                // Entspr. Hinweistext einblenden
                hinweisfalsch.style.display = "block";
            }
        }

blackybaby · 20. März 2017

Hallo abdellaui Vielen Dank auch dir für deine Hilfe
Hab auch dein Script ausprobiert, doch er wechselt mir die Bilder nicht.
Woran kann das liegen?

Danke auch Sempervivum

✔ Javascript Auswertung Quiz

blackybaby

Grünschnabel

Sempervivum

Erfahrenes Mitglied

blackybaby

Grünschnabel

blackybaby

Grünschnabel

Sempervivum

Erfahrenes Mitglied

Sempervivum

Erfahrenes Mitglied

blackybaby

Grünschnabel

abdellaui

Erfahrenes Mitglied

Sempervivum

Erfahrenes Mitglied

blackybaby

Grünschnabel

Neue Beiträge