1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Javascript Auswertung Quiz

Dieses Thema im Forum "Javascript & Ajax" wurde erstellt von blackybaby, 20. März 2017.

  1. blackybaby

    blackybaby Grünschnabel

    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:

    Code (PHP):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Reiseb&uuml;ro Bauer</title>
    6. <link href="../css/stylereisebuero.css" rel="stylesheet" type="text/css" />
    7.  
    8.  
    9.  
    10. </head>
    11.  
    12. <body>
    13. <div id="gesamt"><!--Anfang DIV Gesamt-->
    14. <div id="kopf"><!--Anfang DIV Kopf-->
    15. <div id="kopf_name"><img src="../images/logo.png" width="229" height="128" alt=""/></div>
    16. </div><!--Ende DIV Kopf-->
    17. <div id="nav"><!--Anfang DIV Nav-->
    18. <ul id="navigation">
    19. <li><a href="../index.htm" class="aktuell">Startseite</a></li>
    20.    <li><a href="reiseziele.htm">Reiseziele</a>
    21.    <ul id="reiseziele2">
    22.        <li><a href="#">T&uuml;rkei</a></li>
    23.        <li><a href="#">Indien</a></li>
    24.    <li><a href="#">&Auml;gypten</a></li>
    25.     <li><a href="#">China</a></li>
    26.        </ul>
    27.    </li>
    28. <li><a href="fluege.htm">Fl&uuml;ge</a></li>
    29. <li><a href="hotels.htm">Hotels</a></li>
    30. <li><a href="kreuzfahrten.htm">Kreuzfahrten</a></li>
    31. <li><a href="ueberuns.htm"><span xml:lang="en">&Uuml;ber uns</span></a></li>
    32. <li><a href="reisequiz.php">Reisequiz</a></li>
    33. <li><a href="kontakt.htm">Kontakt</a></li>
    34. <li><a href="gaestebuch.htm">G&auml;stebuch</a></li>
    35. </ul>
    36. </div><!--Ende DIV Nav-->
    37. <div id="haupt"><!--Anfang DIV Haupt-->
    38. <div id="info">
    39.   <h3>Kontakt</h3>
    40.    <h2><u>&Ouml;ffnungszeiten:</u></h2>
    41.    <p>Mo. - Fr.: 09:00 Uhr bis 13 Uhr<br />
    42.    und 14:00 Uhr bis 18:00 Uhr<br />
    43. Samstag: 09:00 Uhr bis 13:00 Uhr</p>
    44. <p>Gerne auch außerhalb der &Ouml;ffnungszeiten nach Terminvereinbarung!</p>
    45.    <h2><u>Kontaktdaten:</u></h2>
    46.    <p>Max Mustermann Strasse 10<br />
    47.    12345 Musterstadt<br />
    48.    Tel.: 01234/5678912<br />
    49.    Fax: 01234/5678900<br />
    50.        E-Mail:<a href="mailto:rbbauer@musterstadt.de">rbbauer@musterstadt.de</a></p>
    51.        <p>Wir beraten Sie gerne und freuen uns auf Ihren Besuch!</p>
    52.    
    53. </div>
    54.  
    55.  
    56. <div id="inhalt"><!---- Anfang DIV Inhalt-->
    57. <div id="quiz"><!-- Anfang DIV Quiz-->
    58.    
    59.    <img class="moschee" src="../images/BlaueMoschee_Michael Brüggemann_pixelio.jpg" width="400" height="300" alt=""/><br />
    60.    <form>
    61.    <br />
    62.    <h2>In welcher Stadt steht diese Sehensw&uuml;rdigkeit?</h2>
    63. <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 />
    64. <h2>Wieviele Einwohner hat die Stadt?</h2>
    65. <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 />
    66. <br />
    67.    <?php
    68.        date_default_timezone_set('Europe/Istanbul');
    69.    $timestamp = time();
    70.    $datum = date("H:i", $timestamp);
    71.    echo "<b>Dort ist es momentan $datum Uhr</b>";
    72.    ?>
    73.    <br /><br />
    74.    <input class="button" name="senden" type="submit" value="Auswertung" onClick="auswerten()" />
    75.    
    76.    
    77.    </form>
    78.    
    79.     </div><!-- Ende DIV Quiz -->
    80.    </div><!--Ende DIV Inhalt-->
    81.    
    82.    </div><!--Ende DIV Haupt-->
    83.    <div class="fett" id="fuss">
    84. <div id="bg_fuss">Bauer &copy; 2017</div>
    85. </div>
    86.    </div><!--Ende DIV Gesamt-->
    87.  
    88.    
    89.    </body>
    90. </html>
    Bedanke mich schon mal bei allen die mir helfen.

    LG
    blackybaby
     
  2. Sempervivum

    Sempervivum Erfahrenes Mitglied

    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 (Text):
    1.     <input class="button" name="senden" type="button" value="Auswertung" onclick="auswerten()" />
    2.     <div id="hinweisfalsch">Das ist falsch. Bitte korrigieren Sie ihre Antwort(en).</div>
    3.     <div id="hinweisrichtig">Das ist richtig.<br />
    4.         <a href="frage2.html">Zur nächsten Frage</a>
    5.     </div>
    6.     <style>
    7.         #hinweisfalsch, #hinweisrichtig {
    8.             display: none;
    9.         }
    10.     </style>
    11.     <script>
    12.         function auswerten() {
    13.             var einwohner = parseInt(antwort2.value);
    14.             // Ein Element steht unter einer globalen Variablen zu Verfügung,
    15.             // die den selben Namen wie sein ID hat
    16.  
    17.             // Prüfen, ob die Antworten richtig sind
    18.             if (antwort1.value == "Istanbul" && einwohner > 14000000 && einwohner < 16000000) {
    19.                 // Richtige Antworten
    20.                 // Entspr. Hinweistexte einblenden
    21.                 hinweisrichtig.style.display = "block";
    22.             } else {
    23.                 // Falsche Antwort(en)
    24.                 // Entspr. Hinweistext einblenden
    25.                 hinweisfalsch.style.display = "block";
    26.             }
    27.         }
    28.     </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 gefällt das.
  3. blackybaby

    blackybaby Grünschnabel

    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
     
  4. blackybaby

    blackybaby Grünschnabel

  5. Sempervivum

    Sempervivum Erfahrenes Mitglied

    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.
     
    blackybaby gefällt das.
  6. Sempervivum

    Sempervivum Erfahrenes Mitglied

    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 gefällt das.
  7. blackybaby

    blackybaby Grünschnabel

    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?
     
  8. abdellaui

    abdellaui Erfahrenes Mitglied

    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 (Text):
    1. (function(){
    2. var quiz = 1;
    3. var richtigeAntworten = 0;
    4. var $ = function(id){
    5.    return document.getElementById(id);
    6. }
    7. function addZero(i) {
    8.     if(i < 10) {i = "0" + i;}
    9.     return i;
    10. }
    11. function zeitAngabe(){
    12.    console.log('a');
    13.    var utcUnterschied = [
    14.   3,  /* ORT 1  Zeitverschiebung: UTC/GMT +3 Stunden */
    15.   -3,  /* ORT 2 */
    16.   5,  /* ORT 3 */
    17.   6,  /* ORT 4 */
    18.   8,  /* ORT 5 */
    19.   -10,  /* ORT 6 */
    20.   ];
    21.    var uhrzeit = new Date();
    22.    var uhrzeitUtc = new Date(uhrzeit.getUTCFullYear(), uhrzeit.getUTCMonth(), uhrzeit.getUTCDate(), (uhrzeit.getUTCHours()+utcUnterschied[quiz-1]), uhrzeit.getUTCMinutes(), uhrzeit.getUTCSeconds());
    23.    $('zeit').innerHTML = 'Dort ist es momentan  '+addZero(uhrzeitUtc.getHours())+':'+addZero(uhrzeitUtc.getMinutes())+':'+addZero(uhrzeitUtc.getSeconds())+' Uhr.';
    24.  
    25. }
    26. function quizBauen(){
    27.    var quizBilder = [
    28.   'https://becca.r2it.de/abschlusspruefung/images/BlaueMoschee_Michael%20Br%C3%BCggemann_pixelio.jpg',
    29.   'https://becca.r2it.de/abschlusspruefung/images/Gizeh_Caroline%20Lang_pixelio.jpg',
    30.   'https://becca.r2it.de/abschlusspruefung/images/Himmelstempel_Dieter%20Sch%C3%BCtz_pixelio.jpg',
    31.   'https://becca.r2it.de/abschlusspruefung/images/Jesusstaue_Carlosh_pixelio.jpg',
    32.   'https://becca.r2it.de/abschlusspruefung/images/OperSydney_Martin%20J%C3%A4ger_pixelio.jpg',
    33.   'https://becca.r2it.de/abschlusspruefung/images/TajMahal_Paulwip_pixelio.jpg'
    34.   ];
    35.   var fragen = [
    36.   "In welcher Stadt steht diese Sehenswürdigkeit?","Wie viele Einwohner hat die Stadt?",
    37.   "In welcher Stadt steht diese Sehenswürdigkeit?","Wie viele Einwohner hat die Stadt?",
    38.   "In welcher Stadt steht diese Sehenswürdigkeit?","Wie viele Einwohner hat die Stadt?",
    39.   "In welcher Stadt steht diese Sehenswürdigkeit?","Wie viele Einwohner hat die Stadt?",
    40.   "In welcher Stadt steht diese Sehenswürdigkeit?","Wie viele Einwohner hat die Stadt?",
    41.   "In welcher Stadt steht diese Sehenswürdigkeit?","Wie viele Einwohner hat die Stadt?"
    42.   ];
    43.   zeitAngabe();
    44.   frageIndex = (quiz-1)*2;
    45.   $('frage1').innerHTML = fragen[frageIndex];
    46.   $('frage1').innerHTML = fragen[frageIndex+1];
    47.   $('auswerten').value='Auswertung';
    48.   $('antwort1').value = 'Geben Sie hier Ihre Antwort ein';
    49.   $('antwort2').value = 'Geben Sie hier Ihre Antwort ein';
    50.   $('quizbild').src=quizBilder[quiz];
    51. }
    52. function auswerten(){
    53.    if($('auswerten').value=='Auswertung'){
    54.        quizIndex = (quiz-1)*2;
    55.     var antworten = [
    56.     'Istanbul','14,3',                              /* QUIZ 1 */
    57.     'ANTWORT','ANTWORT',                           /* QUIZ 2 */
    58.     'ANTWORT','ANTWORT',                           /* QUIZ 3 */
    59.     'ANTWORT','ANTWORT',                           /* QUIZ 4 */
    60.     'ANTWORT','ANTWORT',                           /* QUIZ 5 */
    61.     'ANTWORT','ANTWORT'                             /* QUIZ 6 */
    62.     ];
    63.        if(antworten[quizIndex] == $('antwort1').value){
    64.            $('antwort1').value = 'Richtig';
    65.       richtigeAntworten++;
    66.        }else{
    67.            $('antwort1').value = 'Leider falsch';
    68.        }
    69.        
    70.        if(antworten[quizIndex+1] == $('antwort2').value){
    71.            $('antwort2').value = 'Richtig';
    72.       richtigeAntworten++;
    73.        }else{
    74.            $('antwort2').value = 'Leider falsch';
    75.        }
    76.     if(quiz<5){
    77.     $('auswerten').value='Nächste Quiz';
    78.     }else{
    79.     $('auswerten').value='Quiz auswerten!';
    80.     }
    81.     }else{
    82.        if(quiz<5){
    83.          quiz++;
    84.            quizBauen();
    85.       }else{
    86.        $('quiz').innerHTML='<h2>Richtige Antworten: 12/'+richtigeAntworten+'</h2><br><input class="button"  type="submit" value="Neu staten" onclick="window.location.reload();" />';
    87.       }
    88.     }
    89. }
    90. $('auswerten').addEventListener('click',auswerten);
    91. zeitAngabe();
    92. window.setInterval(zeitAngabe,1000);
    93. })();
    HTML:
    Code (HTML5):
    1. <div id="gesamt"><!--Anfang DIV Gesamt-->
    2. <div id="kopf"><!--Anfang DIV Kopf-->
    3. <div id="kopf_name"><img  src="../images/logo.png" width="229" height="128" alt=""/></div>
    4. </div><!--Ende DIV Kopf-->
    5. <div id="nav"><!--Anfang DIV Nav-->
    6. <ul id="navigation">
    7. <li><a href="../index.htm" class="aktuell">Startseite</a></li>
    8.    <li><a href="reiseziele.htm">Reiseziele</a>
    9.    <ul id="reiseziele2">
    10.        <li><a href="#">T&uuml;rkei</a></li>
    11.        <li><a href="#">Indien</a></li>
    12.    <li><a href="#">&Auml;gypten</a></li>
    13.     <li><a href="#">China</a></li>
    14.        </ul>
    15.    </li>
    16. <li><a href="fluege.htm">Fl&uuml;ge</a></li>
    17. <li><a href="hotels.htm">Hotels</a></li>
    18. <li><a href="kreuzfahrten.htm">Kreuzfahrten</a></li>
    19. <li><a href="ueberuns.htm"><span xml:lang="en">&Uuml;ber uns</span></a></li>
    20. <li><a href="reisequiz.php">Reisequiz</a></li>
    21. <li><a href="kontakt.htm">Kontakt</a></li>
    22. <li><a href="gaestebuch.htm">G&auml;stebuch</a></li>
    23. </ul>
    24. </div><!--Ende DIV Nav-->
    25. <div id="haupt"><!--Anfang DIV Haupt-->
    26. <div id="info">
    27.   <h3>Kontakt</h3>
    28.    <h2><u>&Ouml;ffnungszeiten:</u></h2>
    29.    <p>Mo. - Fr.: 09:00 Uhr bis 13 Uhr<br />
    30.    und 14:00 Uhr bis 18:00 Uhr<br />
    31. Samstag: 09:00 Uhr bis 13:00 Uhr</p>
    32. <p>Gerne auch außerhalb der &Ouml;ffnungszeiten nach Terminvereinbarung!</p>
    33.    <h2><u>Kontaktdaten:</u></h2>
    34.    <p>Max Mustermann Strasse 10<br />
    35.    12345 Musterstadt<br />
    36.    Tel.: 01234/5678912<br />
    37.    Fax: 01234/5678900<br />
    38.        E-Mail:<a href="mailto:rbbauer@musterstadt.de">rbbauer@musterstadt.de</a></p>
    39.        <p>Wir beraten Sie gerne und freuen uns auf Ihren Besuch!</p>
    40.    
    41. </div>
    42. <div id="inhalt"><!---- Anfang DIV Inhalt-->
    43. <div id="quiz"><!-- Anfang DIV Quiz-->
    44.    
    45.    <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 />
    46.    <!--<form>-->
    47.    <br />
    48.    <h2 id="frage1">In welcher Stadt steht diese Sehensw&uuml;rdigkeit?</h2>
    49. <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 />
    50. <h2 id="frage2">Wie viele Einwohner hat die Stadt?</h2>
    51. <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 />
    52. <br />
    53. <div id="zeit"></div>
    54.    <br /><br />
    55.    <input class="button" id="auswerten" name="senden" type="submit" value="Auswertung" />
    56.    
    57.    <!--</form>-->
    58.    
    59.     </div><!-- Ende DIV Quiz -->
    60.    </div><!--Ende DIV Inhalt-->
    61.    
    62.    </div><!--Ende DIV Haupt-->
    63.    <div class="fett" id="fuss">
    64. <div id="bg_fuss">Bauer &copy; 2017</div>
    65. </div>
    66.    </div><!--Ende DIV Gesamt-->
    67.  
    Zusätzlich JSFIDDLE:
    https://jsfiddle.net/5usdm0vs/
     
    blackybaby gefällt das.
  9. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Code (Text):
    1. 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 (Text):
    1.         var url = window.location.href;
    2.         var parts = url.split("?score=");
    3.         if (parts[1]) var score = parseInt(parts[1]); else var score = 0;
    4.         function auswerten() {
    5.             var einwohner = parseInt(antwort2.value);
    6.             // Ein Element steht unter einer globalen Variablen zu Verfügung,
    7.             // die den selben Namen wie sein ID hat
    8.  
    9.             // Prüfen, ob die Antworten richtig sind
    10.             if (antwort1.value == "Istanbul" && einwohner > 14000000 && einwohner < 16000000) {
    11.                 // Richtige Antworten
    12.                 // Entspr. Hinweistexte einblenden
    13.                 hinweisrichtig.style.display = "block";
    14.                 score++;
    15.                 hrefnext.href = hrefnext.href.replace(/\?score=[0-9]+/, "?score=" + score);
    16.             } else {
    17.                 // Falsche Antwort(en)
    18.                 // Entspr. Hinweistext einblenden
    19.                 hinweisfalsch.style.display = "block";
    20.             }
    21.         }
     
    blackybaby gefällt das.
  10. blackybaby

    blackybaby Grünschnabel

    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
     
  11. abdellaui

    abdellaui Erfahrenes Mitglied

    @blackybaby du hast deinem img tag die id quizbild zugewiesen?
     
    blackybaby gefällt das.
  12. blackybaby

    blackybaby Grünschnabel

    Vielen Dank, ja das hätt ich selber finden können. Bin aber glaub ich grad zu müde dazu. Tausend Dank für eure super Hilfe. Find ich echt klasse. Hab einiges draus gelernt. Wünsch allen eine gute Nacht
     
    abdellaui gefällt das.
  13. abdellaui

    abdellaui Erfahrenes Mitglied

    PS: Passe noch die UTC Zeitverschiebungen an:
    Code (Text):
    1.    var utcUnterschied = [
    2.   3,  /* ORT 1  Zeitverschiebung: UTC/GMT +3 Stunden */
    3.   -3,  /* ORT 2 */
    4.   5,  /* ORT 3 */
    5.   6,  /* ORT 4 */
    6.   8,  /* ORT 5 */
    7.   -10,  /* ORT 6 */
    8.   ];
    bis auf das Erste sind Alle fiktiv.
     
    blackybaby gefällt das.
  14. blackybaby

    blackybaby Grünschnabel

    der lässt mir beim quiz immer das zweit bild aus woran kann das liegen?
     
  15. abdellaui

    abdellaui Erfahrenes Mitglied

    Na gut, du solltest deine Bilder eventuell so umbennen das sie keine Leerzeichen oder äöü?., ähnliche Zeichen beinhalten. Bei meinem Browser (Firefox) erscheinen keine Probleme, ist aber nicht die Regel.

    Code (Text):
    1.    var quizBilder = [
    2.   'https://becca.r2it.de/abschlusspruefung/images/BlaueMoschee_Michael%20Br%C3%BCggemann_pixelio.jpg',
    3.   'https://becca.r2it.de/abschlusspruefung/images/Gizeh_Caroline%20Lang_pixelio.jpg',
    4.   'https://becca.r2it.de/abschlusspruefung/images/Himmelstempel_Dieter%20Sch%C3%BCtz_pixelio.jpg',
    5.   'https://becca.r2it.de/abschlusspruefung/images/Jesusstaue_Carlosh_pixelio.jpg',
    6.   'https://becca.r2it.de/abschlusspruefung/images/OperSydney_Martin%20J%C3%A4ger_pixelio.jpg',
    7.   'https://becca.r2it.de/abschlusspruefung/images/TajMahal_Paulwip_pixelio.jpg'
    8.   ];
    Also, im FTP bilder so unbennen das sie keine Sonderzeichen beinhalten und den oben genannten Codeausschnitt daran anpassen.

    Und am besten ersetz du dein HTML mit den was ich empfohlen hatte. (zwischen <body></body>)
     
  16. abdellaui

    abdellaui Erfahrenes Mitglied

    Ersetze dein HTML mit: (bennene noch die Bilder um und passe sie im HTML an)
    Code (HTML5):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
    3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    4. <title>Reiseb&uuml;ro Bauer</title>
    5. <link href="../css/stylereisebuero.css" rel="stylesheet" type="text/css" />
    6.  
    7.  
    8.  
    9. </head>
    10.  
    11. <div id="gesamt"><!--Anfang DIV Gesamt-->
    12. <div id="kopf"><!--Anfang DIV Kopf-->
    13. <div id="kopf_name"><img  src="../images/logo.png" width="229" height="128" alt=""/></div>
    14. </div><!--Ende DIV Kopf-->
    15. <div id="nav"><!--Anfang DIV Nav-->
    16. <ul id="navigation">
    17. <li><a href="../index.htm" class="aktuell">Startseite</a></li>
    18.    <li><a href="reiseziele.htm">Reiseziele</a>
    19.    <ul id="reiseziele2">
    20.        <li><a href="#">T&uuml;rkei</a></li>
    21.        <li><a href="#">Indien</a></li>
    22.    <li><a href="#">&Auml;gypten</a></li>
    23.     <li><a href="#">China</a></li>
    24.        </ul>
    25.    </li>
    26. <li><a href="fluege.htm">Fl&uuml;ge</a></li>
    27. <li><a href="hotels.htm">Hotels</a></li>
    28. <li><a href="kreuzfahrten.htm">Kreuzfahrten</a></li>
    29. <li><a href="ueberuns.htm"><span xml:lang="en">&Uuml;ber uns</span></a></li>
    30. <li><a href="reisequiz.php">Reisequiz</a></li>
    31. <li><a href="kontakt.htm">Kontakt</a></li>
    32. <li><a href="gaestebuch.htm">G&auml;stebuch</a></li>
    33. </ul>
    34. </div><!--Ende DIV Nav-->
    35. <div id="haupt"><!--Anfang DIV Haupt-->
    36. <div id="info">
    37.   <h3>Kontakt</h3>
    38.    <h2><u>&Ouml;ffnungszeiten:</u></h2>
    39.    <p>Mo. - Fr.: 09:00 Uhr bis 13 Uhr<br />
    40.    und 14:00 Uhr bis 18:00 Uhr<br />
    41. Samstag: 09:00 Uhr bis 13:00 Uhr</p>
    42. <p>Gerne auch außerhalb der &Ouml;ffnungszeiten nach Terminvereinbarung!</p>
    43.    <h2><u>Kontaktdaten:</u></h2>
    44.    <p>Max Mustermann Strasse 10<br />
    45.    12345 Musterstadt<br />
    46.    Tel.: 01234/5678912<br />
    47.    Fax: 01234/5678900<br />
    48.        E-Mail:<a href="mailto:rbbauer@musterstadt.de">rbbauer@musterstadt.de</a></p>
    49.        <p>Wir beraten Sie gerne und freuen uns auf Ihren Besuch!</p>
    50.    
    51. </div>
    52. <div id="inhalt"><!---- Anfang DIV Inhalt-->
    53. <div id="quiz"><!-- Anfang DIV Quiz-->
    54.    
    55.    <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 />
    56.    <!--<form>-->
    57.    <br />
    58.    <h2 id="frage1">In welcher Stadt steht diese Sehensw&uuml;rdigkeit?</h2>
    59. <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 />
    60. <h2 id="frage2">Wie viele Einwohner hat die Stadt?</h2>
    61. <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 />
    62. <br />
    63. <div id="zeit"></div>
    64.    <br /><br />
    65.    <input class="button" id="auswerten" name="senden" type="submit" value="Auswertung" />
    66.    
    67.    <!--</form>-->
    68.    
    69.     </div><!-- Ende DIV Quiz -->
    70.    </div><!--Ende DIV Inhalt-->
    71.    
    72.    </div><!--Ende DIV Haupt-->
    73.    <div class="fett" id="fuss">
    74. <div id="bg_fuss">Bauer &copy; 2017</div>
    75. </div>
    76.    </div><!--Ende DIV Gesamt-->
    77.  <script>
    78.    
    79.    (function(){
    80. var quiz = 1;
    81. var richtigeAntworten = 0;
    82. var $ = function(id){
    83.    return document.getElementById(id);
    84. }
    85. function addZero(i) {
    86.     if(i < 10) {i = "0" + i;}
    87.    return i;
    88. }
    89. function zeitAngabe(){
    90.   console.log('a');
    91.   var utcUnterschied = [
    92.  2,  /* ORT 1  Zeitverschiebung: UTC/GMT +2 Stunden */
    93.  2,  /* ORT 2 */
    94.  8,  /* ORT 3 */
    95.  -2,  /* ORT 4 */
    96.  11,  /* ORT 5 */
    97.  -10,  /* ORT 6 */
    98.  ];
    99.   var uhrzeit = new Date();
    100.   var uhrzeitUtc = new Date(uhrzeit.getUTCFullYear(), uhrzeit.getUTCMonth(), uhrzeit.getUTCDate(), (uhrzeit.getUTCHours()+utcUnterschied[quiz-1]), uhrzeit.getUTCMinutes(), uhrzeit.getUTCSeconds());
    101.   $('zeit').innerHTML = 'Dort ist es momentan  '+addZero(uhrzeitUtc.getHours())+':'+addZero(uhrzeitUtc.getMinutes())+':'+addZero(uhrzeitUtc.getSeconds())+' Uhr.';
    102. }
    103. function quizBauen(){
    104.   var quizBilder = [
    105.  'https://becca.r2it.de/abschlusspruefung/images/BlaueMoschee_Michael%20Br%C3%BCggemann_pixelio.jpg',
    106.  'https://becca.r2it.de/abschlusspruefung/images/Gizeh_Caroline%20Lang_pixelio.jpg',
    107.  'https://becca.r2it.de/abschlusspruefung/images/Himmelstempel_Dieter%20Sch%C3%BCtz_pixelio.jpg',
    108.  'https://becca.r2it.de/abschlusspruefung/images/Jesusstaue_Carlosh_pixelio.jpg',
    109.  'https://becca.r2it.de/abschlusspruefung/images/OperSydney_Martin%20J%C3%A4ger_pixelio.jpg',
    110.  'https://becca.r2it.de/abschlusspruefung/images/TajMahal_Paulwip_pixelio.jpg'
    111.  ];
    112.  var fragen = [
    113.  "In welcher Stadt steht diese Sehenswürdigkeit?","Wie viele Einwohner hat die Stadt?",
    114.  "In welcher Stadt steht diese Sehenswürdigkeit?","Wie viele Einwohner hat die Stadt?",
    115.  "In welcher Stadt steht diese Sehenswürdigkeit?","Wie viele Einwohner hat die Stadt?",
    116.  "In welcher Stadt steht diese Sehenswürdigkeit?","Wie viele Einwohner hat die Stadt?",
    117.  "In welcher Stadt steht diese Sehenswürdigkeit?","Wie viele Einwohner hat die Stadt?",
    118.  "In welcher Stadt steht diese Sehenswürdigkeit?","Wie viele Einwohner hat die Stadt?"
    119.  ];
    120.  zeitAngabe();
    121.  frageIndex = (quiz-1)*2;
    122.  $('frage1').innerHTML = fragen[frageIndex];
    123.  $('frage1').innerHTML = fragen[frageIndex+1];
    124.  $('auswerten').value='Auswertung';
    125.  $('antwort1').value = 'Geben Sie hier Ihre Antwort ein';
    126.  $('antwort2').value = 'Geben Sie hier Ihre Antwort ein';
    127.  $('quizbild').src=quizBilder[quiz];
    128. }
    129. function auswerten(){
    130.   if($('auswerten').value=='Auswertung'){
    131.       quizIndex = (quiz-1)*2;
    132.    var antworten = [
    133.    'Istanbul','14,3',                              /* QUIZ 1 */
    134.    'Peking','11,5',                           /* QUIZ 2 */
    135.    'Rio de Janeiro','6,3',                           /* QUIZ 3 */
    136.    'Sydney','4,3',                           /* QUIZ 4 */
    137.    'Agra','1,6',                           /* QUIZ 5 */
    138.    'Agra','1,6'                             /* QUIZ 6 */
    139.    ];
    140.       if(antworten[quizIndex] == $('antwort1').value){
    141.           $('antwort1').value = 'Richtig';
    142.      richtigeAntworten++;
    143.       }else{
    144.           $('antwort1').value = 'Leider falsch';
    145.       }
    146.      
    147.       if(antworten[quizIndex+1] == $('antwort2').value){
    148.           $('antwort2').value = 'Richtig';
    149.      richtigeAntworten++;
    150.       }else{
    151.           $('antwort2').value = 'Leider falsch';
    152.       }
    153.    if(quiz<6){
    154.    $('auswerten').value='Nächste Quiz';
    155.    }else{
    156.    $('auswerten').value='Quiz auswerten!';
    157.    }
    158.    }else{
    159.       if(quiz<6){
    160.         quiz++;
    161.           quizBauen();
    162.      }else{
    163.       $('quiz').innerHTML='<h2>Richtige Antworten: 12/'+richtigeAntworten+'</h2><br><input class="button"  type="submit" value="Neu staten" onclick="window.location.reload();" />';
    164.       }
    165.     }
    166. }
    167. $('auswerten').addEventListener('click',auswerten);
    168. zeitAngabe();
    169. window.setInterval(zeitAngabe,1000);
    170. })();
    171.    </script>
    172.    </body>
    173. </html>
     
    blackybaby gefällt das.
  17. blackybaby

    blackybaby Grünschnabel

    Tausend Dank aber er nimmt das zweite Bild immer noch nicht an.
     
  18. abdellaui

    abdellaui Erfahrenes Mitglied

    Vor lauter Bäumen sieht man den Wald nicht mehr :)
    Zeile 129 hatte den falschen Array Index:

    Falsch
    Code (Text):
    1.  $('quizbild').src=quizBilder[quiz];
    Richtig:

    Code (Text):
    1.  $('quizbild').src=quizBilder[quiz-1];
    Ersetze dein HTML mit diesem hier:
    Code (HTML5):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
    3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    4. <title>Reiseb&uuml;ro Bauer</title>
    5. <link href="../css/stylereisebuero.css" rel="stylesheet" type="text/css" />
    6.  
    7.  
    8.  
    9. </head>
    10.  
    11. <div id="gesamt"><!--Anfang DIV Gesamt-->
    12. <div id="kopf"><!--Anfang DIV Kopf-->
    13. <div id="kopf_name"><img  src="../images/logo.png" width="229" height="128" alt=""/></div>
    14. </div><!--Ende DIV Kopf-->
    15. <div id="nav"><!--Anfang DIV Nav-->
    16. <ul id="navigation">
    17. <li><a href="../index.htm" class="aktuell">Startseite</a></li>
    18.    <li><a href="reiseziele.htm">Reiseziele</a>
    19.    <ul id="reiseziele2">
    20.        <li><a href="#">T&uuml;rkei</a></li>
    21.        <li><a href="#">Indien</a></li>
    22.    <li><a href="#">&Auml;gypten</a></li>
    23.     <li><a href="#">China</a></li>
    24.        </ul>
    25.    </li>
    26. <li><a href="fluege.htm">Fl&uuml;ge</a></li>
    27. <li><a href="hotels.htm">Hotels</a></li>
    28. <li><a href="kreuzfahrten.htm">Kreuzfahrten</a></li>
    29. <li><a href="ueberuns.htm"><span xml:lang="en">&Uuml;ber uns</span></a></li>
    30. <li><a href="reisequiz.php">Reisequiz</a></li>
    31. <li><a href="kontakt.htm">Kontakt</a></li>
    32. <li><a href="gaestebuch.htm">G&auml;stebuch</a></li>
    33. </ul>
    34. </div><!--Ende DIV Nav-->
    35. <div id="haupt"><!--Anfang DIV Haupt-->
    36. <div id="info">
    37.   <h3>Kontakt</h3>
    38.    <h2><u>&Ouml;ffnungszeiten:</u></h2>
    39.    <p>Mo. - Fr.: 09:00 Uhr bis 13 Uhr<br />
    40.    und 14:00 Uhr bis 18:00 Uhr<br />
    41. Samstag: 09:00 Uhr bis 13:00 Uhr</p>
    42. <p>Gerne auch außerhalb der &Ouml;ffnungszeiten nach Terminvereinbarung!</p>
    43.    <h2><u>Kontaktdaten:</u></h2>
    44.    <p>Max Mustermann Strasse 10<br />
    45.    12345 Musterstadt<br />
    46.    Tel.: 01234/5678912<br />
    47.    Fax: 01234/5678900<br />
    48.        E-Mail:<a href="mailto:rbbauer@musterstadt.de">rbbauer@musterstadt.de</a></p>
    49.        <p>Wir beraten Sie gerne und freuen uns auf Ihren Besuch!</p>
    50.  
    51. </div>
    52. <div id="inhalt"><!---- Anfang DIV Inhalt-->
    53. <div id="quiz"><!-- Anfang DIV Quiz-->
    54.  
    55.    <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 />
    56.    <!--<form>-->
    57.    <br />
    58.    <h2 id="frage1">In welcher Stadt steht diese Sehensw&uuml;rdigkeit?</h2>
    59. <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 />
    60. <h2 id="frage2">Wie viele Einwohner hat die Stadt?</h2>
    61. <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 />
    62. <br />
    63. <div id="zeit"></div>
    64.    <br /><br />
    65.    <input class="button" id="auswerten" name="senden" type="submit" value="Auswertung" />
    66.  
    67.    <!--</form>-->
    68.  
    69.     </div><!-- Ende DIV Quiz -->
    70.    </div><!--Ende DIV Inhalt-->
    71.  
    72.    </div><!--Ende DIV Haupt-->
    73.    <div class="fett" id="fuss">
    74. <div id="bg_fuss">Bauer &copy; 2017</div>
    75. </div>
    76.    </div><!--Ende DIV Gesamt-->
    77.  <script>
    78.  
    79.    (function(){
    80. var quiz = 1;
    81. var richtigeAntworten = 0;
    82. var $ = function(id){
    83.    return document.getElementById(id);
    84. }
    85. function addZero(i) {
    86.     if(i < 10) {i = "0" + i;}
    87.   return i;
    88. }
    89. function zeitAngabe(){
    90.  console.log('a');
    91.  var utcUnterschied = [
    92. 3,  /* ORT 1  Zeitverschiebung: UTC/GMT +3 Stunden */
    93. 3,  /* ORT 2 */
    94. 8,  /* ORT 3 */
    95. -3,  /* ORT 4 */
    96. 12,  /* ORT 5 */
    97. 6/30,  /* ORT 6 */
    98. ];
    99.  var uhrzeit = new Date();
    100.  var uhrzeitUtc = new Date(uhrzeit.getUTCFullYear(), uhrzeit.getUTCMonth(), uhrzeit.getUTCDate(), (uhrzeit.getUTCHours()+utcUnterschied[quiz-1]), uhrzeit.getUTCMinutes(), uhrzeit.getUTCSeconds());
    101.  $('zeit').innerHTML = 'Dort ist es momentan  '+addZero(uhrzeitUtc.getHours())+':'+addZero(uhrzeitUtc.getMinutes())+':'+addZero(uhrzeitUtc.getSeconds())+' Uhr.';
    102. }
    103. function quizBauen(){
    104.  var quizBilder = [
    105. 'https://becca.r2it.de/abschlusspruefung/images/BlaueMoscheeMichaelBrueggemannpixelio.jpg',
    106. 'https://becca.r2it.de/abschlusspruefung/images/JesusstaueCarloshpixelio.jpg',
    107. 'https://becca.r2it.de/abschlusspruefung/images/HimmelstempelDieterSchuetzpixelio.jpg',
    108. 'https://becca.r2it.de/abschlusspruefung/images/GizehCarolineLangpixelio.jpg',
    109. 'https://becca.r2it.de/abschlusspruefung/images/OperSydneyMartinJaegerpixelio.jpg',
    110. 'https://becca.r2it.de/abschlusspruefung/images/TajMahalPaulwippixelio.jpg'
    111. ];
    112. var fragen = [
    113. "In welcher Stadt steht diese Sehenswürdigkeit?","Wie viele Einwohner hat die Stadt?",
    114. "In welcher Stadt steht diese Sehenswürdigkeit?","Wie viele Einwohner hat die Stadt?",
    115. "In welcher Stadt steht diese Sehenswürdigkeit?","Wie viele Einwohner hat die Stadt?",
    116. "In welcher Stadt steht diese Sehenswürdigkeit?","Wie viele Einwohner hat die Stadt?",
    117. "In welcher Stadt steht diese Sehenswürdigkeit?","Wie viele Einwohner hat die Stadt?",
    118. "In welcher Stadt steht diese Sehenswürdigkeit?","Wie viele Einwohner hat die Stadt?"
    119. ];
    120. zeitAngabe();
    121. frageIndex = (quiz-1)*2;
    122. $('frage1').innerHTML = fragen[frageIndex];
    123. $('frage1').innerHTML = fragen[frageIndex+1];
    124. $('auswerten').value='Auswertung';
    125. $('antwort1').value = 'Geben Sie hier Ihre Antwort ein';
    126. $('antwort2').value = 'Geben Sie hier Ihre Antwort ein';
    127. $('quizbild').src=quizBilder[quiz-1];
    128. }
    129. function auswerten(){
    130.  if($('auswerten').value=='Auswertung'){
    131.      quizIndex = (quiz-1)*2;
    132.   var antworten = [
    133.   'Istanbul','14,3',                              /* QUIZ 1 */
    134.   'Peking','11,5',                           /* QUIZ 2 */
    135.   'Rio de Janeiro','6,3',                           /* QUIZ 3 */
    136.   'Sydney','4,3',                           /* QUIZ 4 */
    137.   'Agra','1,6',                           /* QUIZ 5 */
    138.   'Agra','1,6'                             /* QUIZ 6 */
    139.   ];
    140.      if(antworten[quizIndex] == $('antwort1').value){
    141.          $('antwort1').value = 'Richtig';
    142.     richtigeAntworten++;
    143.      }else{
    144.          $('antwort1').value = 'Leider falsch';
    145.      }
    146.    
    147.      if(antworten[quizIndex+1] == $('antwort2').value){
    148.          $('antwort2').value = 'Richtig';
    149.     richtigeAntworten++;
    150.      }else{
    151.          $('antwort2').value = 'Leider falsch';
    152.      }
    153.   if(quiz<6){
    154.   $('auswerten').value='Nächste Quiz';
    155.   }else{
    156.   $('auswerten').value='Quiz auswerten!';
    157.   }
    158.   }else{
    159.      if(quiz<6){
    160.        quiz++;
    161.          quizBauen();
    162.     }else{
    163.      $('quiz').innerHTML='<h2>Richtige Antworten: 12/'+richtigeAntworten+'</h2><br><input class="button"  type="submit" value="Neu staten" onclick="window.location.reload();" />';
    164.       }
    165.     }
    166. }
    167. $('auswerten').addEventListener('click',auswerten);
    168. zeitAngabe();
    169. window.setInterval(zeitAngabe,1000);
    170. })();
    171.    </script>
    172.    </body>
    173. </html>
     
  19. blackybaby

    blackybaby Grünschnabel

    Nochmals Tausend Dank- jetzt geht alles
     
    abdellaui gefällt das.
Die Seite wird geladen...