✔ Javascript Auswertung Quiz

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
 
PS: Passe noch die UTC Zeitverschiebungen an:
Code: 
   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 */
  ];

bis auf das Erste sind Alle fiktiv.
 
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: 
   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'
  ];

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>)
 
Ersetze dein HTML mit: (bennene noch die Bilder um und passe sie im HTML an)
HTML: 
<!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" 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-->
 <script>
   
   (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 = [
  2,  /* ORT 1  Zeitverschiebung: UTC/GMT +2 Stunden */
  2,  /* ORT 2 */
  8,  /* ORT 3 */
  -2,  /* ORT 4 */
  11,  /* 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 */
    'Peking','11,5',                           /* QUIZ 2 */
    'Rio de Janeiro','6,3',                           /* QUIZ 3 */
    'Sydney','4,3',                           /* QUIZ 4 */
    'Agra','1,6',                           /* QUIZ 5 */
    'Agra','1,6'                             /* 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<6){
    $('auswerten').value='Nächste Quiz';
    }else{
    $('auswerten').value='Quiz auswerten!';
    }
    }else{
       if(quiz<6){
         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);
})();
   </script>
   </body>
</html>
 
Vor lauter Bäumen sieht man den Wald nicht mehr :)
Zeile 129 hatte den falschen Array Index:

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

Richtig:

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

Ersetze dein HTML mit diesem hier:
HTML: 
<!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" 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-->
 <script>
  
   (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 */
8,  /* ORT 3 */
-3,  /* ORT 4 */
12,  /* ORT 5 */
6/30,  /* 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/BlaueMoscheeMichaelBrueggemannpixelio.jpg',
'https://becca.r2it.de/abschlusspruefung/images/JesusstaueCarloshpixelio.jpg',
'https://becca.r2it.de/abschlusspruefung/images/HimmelstempelDieterSchuetzpixelio.jpg',
'https://becca.r2it.de/abschlusspruefung/images/GizehCarolineLangpixelio.jpg',
'https://becca.r2it.de/abschlusspruefung/images/OperSydneyMartinJaegerpixelio.jpg',
'https://becca.r2it.de/abschlusspruefung/images/TajMahalPaulwippixelio.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-1];
}
function auswerten(){
  if($('auswerten').value=='Auswertung'){
      quizIndex = (quiz-1)*2;
   var antworten = [
   'Istanbul','14,3',                              /* QUIZ 1 */
   'Peking','11,5',                           /* QUIZ 2 */
   'Rio de Janeiro','6,3',                           /* QUIZ 3 */
   'Sydney','4,3',                           /* QUIZ 4 */
   'Agra','1,6',                           /* QUIZ 5 */
   'Agra','1,6'                             /* 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<6){
   $('auswerten').value='Nächste Quiz';
   }else{
   $('auswerten').value='Quiz auswerten!';
   }
   }else{
      if(quiz<6){
        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);
})();
   </script>
   </body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück