Datenschutzerklärung

bräuchte etwas hilfe bei einem kleinen Quiz

Validome - Forum

 Startseite Validome
RSS 2.0  
Sie sind nicht angemeldet. Atom 1.0  
Forum Home / Javascript-Forum /

bräuchte etwas hilfe bei einem kleinen Quiz

   Beitrag schreiben
Autor
Beitrag Seiten: 1
zaphier
Mitglied

Registriert: 27.05.2007
Beiträge: 10
ich hocke jetzt seit einiger zeit an dieser netten schönen hausarbeit...
es geht darum mit hilfe eines formulars ein quiz aufzubauen...
so, das formular habe ich fertig, mein problem ist jetzt... ich bekomme die sache mit dem javascript für den head einfach nicht hin... java ist nun wahrlich nicht meine stärke

es geht jetzt darum, dass punkte vergeben werden müssen (pro richtige antwort je 1) und halt um die auswertung, die NICHT in einer meldungsbox und unter dem quiz erscheinen soll...

ich wäre sehr dankbar, wenn mir da jemand weiter helfen könnte... unten habe ich das formular mit reingepackt...

gruß
zaphier

Code:

<form name="Quiz">

<table border=0 width=90%>
<tr><td align=center><br><font size=+1>1. Frage:</font></td></tr>

<tr><td>Wie heisst die größte der 3 Pyramiden in Giseh</td>
<td nowrap>

<select name="Vier1" size="4">
      <option value="1">Mykerinos</option>
      <option value="2">Chephren</option>
      <option value="3">Djedefre</option>
      <option value="4">Cheops</option>
    </select>
    </td>
</tr>

<tr><td align=center><br><font size=+1>2. Frage:</font></td></tr>

<tr><td>Wie hieß der Kindpharao?</td>
<td nowrap>
<select name="Vier2" size="4">
      <option value="1">Thutmosis I</option>
      <option value="2">Amenhotep</option>
      <option value="3">Tutanchamun</option>
      <option value="4">Eje</option>
    </select>
    </td>
</tr>

<tr><td align=center><br><font size=+1>3. Frage:</font></td></tr>

<tr><td>Wie heisst die Haupstadt von Ägypten?</td>
<td nowrap>
<select name="Vier3" size="4">
      <option value="1">Kairo</option>
      <option value="2">Luxor</option>
      <option value="3">Alexandria</option>
      <option value="4">Giseh</option>
    </select>
</td>
</tr>

<tr><td align=center><br><font size=+1>4. Frage:</font></td></tr>

<tr><td>Wo liegt das Tal der Könige</td>
<td nowrap>
<select name="Vier4" size="4">
      <option value="1">bei Kairo</option>
      <option value="2">bei Luxor</option>
      <option value="3">bei Alexandria</option>
      <option value="4">bei Giseh</option>
    </select>
    </td>
</tr>
</table>

<form name=total>
<div align=right><input onclick=quiz() type=button value=Auswertung></div>

<center>
<hr><b><font face="Comic Sans MS">Du hast&nbsp;<input size=5 name=score>von&nbsp;<input size=5 value=4 
name=outof>richtig
beantwortet!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Dein Ergebnis:&nbsp;<input size=9 
name=percent>%</font></b></form></center>
27.05.2007 02:18:08
  Zitieren
HTMELL
Administrator

Registriert: 11.05.2006
Beiträge: 544
Hallo,
Du solltest Dir zunächst einmal grundsätzliche Gedanken darüber machen "was" der Script "wie" machen soll.
Da fällt mir spontan ein:
Woher soll der Script wissen welche Antwort bei welcher Frage richtig ist ?
Wie stelle ich fest welche Antwort zu welcher Frage ausgewählt wurde ?
Wieviele Fragen existieren überhaupt ?
Wenn Du diese kleinen Unteraufgaben gelöst hast, ist der Rest nicht mehr schwer.
Hier mal ein par Links die weiterhelfen sollten:
http://www.validome.org/doc/HTML_ge/jav ... /forms.htm
http://www.validome.org/doc/HTML_ge/jav ... ements.htm
http://www.validome.org/doc/HTML_ge/jav ... ptions.htm

_______________________________________
mfg
Thomas Mell

www.validome.org
27.05.2007 15:17:54
  Zitieren
zaphier
Mitglied

Registriert: 27.05.2007
Beiträge: 10
um ehrlich zu sein... das hilft mir alles nicht sonderlich weiter... die seiten kenne ich schon... habe sie nun auch zum 5ten mal gelesen... hilft mir aber nicht, weil ich nicht weiss, wie man das nun unter function Quiz... aussehen soll und muss... ich habe immer noch keine ahnung wie ich das mit der punkteverteilung macht, wie man aufschreibt das diese oder jene antwort die richtige ist... auf den seiten oben steht davon auch nichts... sorry aber das ist wahrlich nicht das was mir weiterhilft...

die sachen wie welche antwort die richtige ist, oder bei welcher frage welche antwort ausgewählt worden ist und wie viele fragen es gibt... das habe ich mir schon in den letzten 5 tagen 200 aufgeschrieben, hilft nichts wenn man nicht weiss wie das aussehen soll und muss... sicher könnte ich jetzt dieses oder jenes reinschreiben... funktionieren tuts net... weil ich es nicht weiss... ich kann javascript nicht! geht nicht in mein hirn... mir geht es nur darum das mir vielleicht jemand einen gescheiten ansatz geben kann... wie das ungefähr aussehen müsste...

Beitrag geändert von zaphier (27.05.2007 16:48:24)
27.05.2007 16:47:47
  Zitieren
dkdenz
Administrator

Ort: Lübeck
Registriert: 25.04.2005
Beiträge: 605
Hallo
Du könntest Dir ja nachfolgendes Script vornehmen und gucken, wie das gemacht worden ist.
Damit solltest Du dann Dein eigenes zusammenbauen können.
http://javascript.internet.com/miscella ... -quiz.html
Viel Spaß noch...

_______________________________________
Mozilla/5.0 (X11; U; Linux i686; de; rv:1.8.0.14eol) Gecko/20080418 Ubuntu/dapper-security Firefox/1.5.0.12eol
27.05.2007 17:29:52
http://dkmd.de | http://dkdenz.de Zitieren
zaphier
Mitglied

Registriert: 27.05.2007
Beiträge: 10
so... das habe ich bis jetzt und jetzt hänge ich ganz fest... wie gehts weiter? hat jemand ne ahnung oder vorschläge?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="de">
<head><title>Götter</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
<meta name="author" content="Zaphier"/>
<meta name="keywords" content="" />
<meta http-equiv="Content-Style-Type" content="text/css"/>

<link rel="stylesheet" type="text/css" href="main.css"/>

<script language="JavaScript" type="text/javascript">
!-->
function Auswerten ()
{
var i=0;

if (document.Quiz.Vier1[1].chacked) i=i;
if (document.Quiz.Vier1[2].chacked) i=i;
if (document.Quiz.Vier1[3].chacked) i=i;
if (document.Quiz.Vier1[4].chacked) i++;

if (document.Quiz.Vier2[1].chacked) i=i;
if (document.Quiz.Vier2[2].chacked) i=i;
if (document.Quiz.Vier2[3].chacked) i++;
if (document.Quiz.Vier2[4].chacked) i=i;

if (document.Quiz.Vier3[1].chacked) i++;
if (document.Quiz.Vier3[2].chacked) i=i;
if (document.Quiz.Vier3[3].chacked) i=i;
if (document.Quiz.Vier3[4].chacked) i=i;

if (document.Quiz.Vier4[1].chacked) i=i;
if (document.Quiz.Vier4[2].chacked) i++;
if (document.Quiz.Vier4[3].chacked) i=i;
if (document.Quiz.Vier4[4].chacked) i=i;

if (i<=0) z="Schlecht";
else if (i<=2) z="Geht so";
else if (i<=3) z="in Ordnung"
else if (i<=4) z="Super";


}





//-->

</script>







</head>
<body>
<h1>Das Ägypten Quiz</h1>

<div id="navigation">

<ul>

<li><a href="Götter.htm">Die wichtigsten Götter</a></li>
<li><a href="index.htm">Startseite</a></li>
<li><a href="Reiseziel-Ägypten.htm">Reiseziel Ägypten</a></li>
<li><a href="pharaonen.htm">Pharaonen & Die Neunheit</a></li>
<li><a href="Quiz.htm">Quiz-Seite</a></li>



</ul>
</div>

<div id="rechts">

<h2>Es kann zu jeder Frage nur eine Antwort ausgewählt werden!</h2>

<p>
<form name="Quiz" onsubmit="return bearbeite()">

<table border=0 width=90%>
<tr><td align=center><br><font size=+1>1. Frage:</font></td></tr>
<tr><td>Wie heisst die größte der 3 Pyramiden in Giseh</td>
<td nowrap>

<select name="Vier1" size="4">
      <option value="1">Mykerinos</option>
      <option value="2">Chephren</option>
      <option value="3">Djedefre</option>
      <option value="4">Cheops</option>
    </select>
    </td>
</tr>


<tr><td align=center><br><font size=+1>2. Frage:</font></td></tr>

<tr><td>Wie hieß der Kindpharao?</td>
<td nowrap>
<select name="Vier2" size="4" >
      <option value="1">Thutmosis I</option>
      <option value="2">Amenhotep</option>
      <option value="3">Tutanchamun</option>
      <option value="4">Eje</option>
    </select>
    </td>
</tr>

<tr><td align=center><br><font size=+1>3. Frage:</font></td></tr>

<tr><td>Wie heisst die Haupstadt von Ägypten?</td>
<td nowrap>
<select name="Vier3" size="4">
      <option value="1">Kairo</option>
      <option value="2">Luxor</option>
      <option value="3">Alexandria</option>
      <option value="4">Giseh</option>
    </select>
</td>
</tr>

<tr><td align=center><br><font size=+1>4. Frage:</font></td></tr>

<tr><td>Wo liegt das Tal der Könige</td>
<td nowrap>
<select name="Vier4" size="4">
      <option value="1">bei Kairo</option>
      <option value="2">bei Luxor</option>
      <option value="3">bei Alexandria</option>
      <option value="4">bei Giseh</option>
    </select>
    </td>
</tr>
</table>

<input onclick=Quiz() type=button value=Auswerten></div>

<center>
<hr><b>Du hast&nbsp;<input size=5 name=score>von&nbsp;<input size=5 value=4
name=outof>richtig
beantwortet!

</form>









<div id="foot">

Verantwortliche:
<a href="mailto:zaphier_toao@yahoo.de">Š Zaphier_toao</a>
</div>
</body></html>
27.05.2007 18:52:35
  Zitieren
HTMELL
Administrator

Registriert: 11.05.2006
Beiträge: 544
H,
dann möchte ich Dir mal etwas weiter helfen ;-)
Wenden wir uns zunächst meinen obigen Unteraufgaben zu:
1. Woher soll der Script wissen welche Antwort bei welcher Frage richtig ist ?
Das würde ich über den value-Wert der option-Elemente regeln - z.B.
<select name="Vier1" size="4">
  <option value="0">Mykerinos</option>
  <option value="0">Chephren</option>
  <option value="0">Djedefre</option>
  <option value="1">Cheops</option>
</select>
Nun muß man nur den ausgewählten Wert auslesen, ist er "1" dann ist die Antwort richtig.

2. Wie stelle ich fest welche Antwort zu welcher Frage ausgewählt wurde ?
Das wir in den von mir geposteten Links erklärt:
var sel = document.forms["formularname"].selectname
var wert = sel.options[sel.selectedIndex].value

3. Wieviele Fragen existieren überhaupt ?
Dafür muß man feststellen wieviele select-Elemente existieren:
var selects = document.getElementsByTagName("select")
var selCount = selects.length

Um nun festzustellen wieviele Antworten richtig sind (entspricht der Punktezahl) muß man nur alle select-Elemente in einer Schleife durchgehen und die option-Elemenente abfragen.
Die Schleife hat den Vorteil das man beliebig viele Fragen hinzufügen oder entfernen kann ohne den Script ändern zu müssen.

var points = 0;
for(i=0; i<selCount; i++) {
  var sel = selects[i];
  if(sel.options(sel.selectedIndex).value == "1") {
    points++;
  }
}

#########################################
Hier kommt nun der kplt. Quelltext, Du musst nur noch die option-Werte wie oben beschrieben anpassen und den %-Wert berechnen und ausgeben - etwas sollst Du auch tun ;-))

Code:

<html>
<head>
<script type="text/javascript">
  function quiz() {
    var selects = document.getElementsByTagName("select");
    var selCount = selects.length;
    var points = 0;
    for(i=0; i<selCount; i++) {
      var sel = selects[i];
      if(sel.selectedIndex == -1)  {
        alert("Bitte beantworten Sie alle Fragen");
        return false;
      }
      else if(sel.options[sel.selectedIndex].value == "1") {
        points++;
      }
    }
    document.forms["Quiz"].score.value = points;
    document.forms["Quiz"].outof.value = selCount;
  }
</script>
</head>
<body>

<form name="Quiz">

<table border=0 width=90%>
<tr><td align=center><br><font size=+1>1. Frage:</font></td></tr>

<tr><td>Wie heisst die größte der 3 Pyramiden in Giseh</td>
<td nowrap>

<select name="Vier1" size="4">
      <option value="0">Mykerinos</option>
      <option value="0">Chephren</option>
      <option value="0">Djedefre</option>
      <option value="1">Cheops</option>
    </select>
    </td>
</tr>

<tr><td align=center><br><font size=+1>2. Frage:</font></td></tr>

<tr><td>Wie hieß der Kindpharao?</td>
<td nowrap>
<select name="Vier2" size="4">
      <option value="1">Thutmosis I</option>
      <option value="2">Amenhotep</option>
      <option value="3">Tutanchamun</option>
      <option value="4">Eje</option>
    </select>
    </td>
</tr>

<tr><td align=center><br><font size=+1>3. Frage:</font></td></tr>

<tr><td>Wie heisst die Haupstadt von Ägypten?</td>
<td nowrap>
<select name="Vier3" size="4">
      <option value="1">Kairo</option>
      <option value="2">Luxor</option>
      <option value="3">Alexandria</option>
      <option value="4">Giseh</option>
    </select>
</td>
</tr>

<tr><td align=center><br><font size=+1>4. Frage:</font></td></tr>

<tr><td>Wo liegt das Tal der Könige</td>
<td nowrap>
<select name="Vier4" size="4">
      <option value="1">bei Kairo</option>
      <option value="2">bei Luxor</option>
      <option value="3">bei Alexandria</option>
      <option value="4">bei Giseh</option>
    </select>
    </td>
</tr>
</table>

<form name=total>
<div align=right><input onclick=quiz() type=button value=Auswertung></div>

<center>
<hr><b><font face="Comic Sans MS">Du hast&nbsp;<input size=5 name=score>von&nbsp;<input size=5  
name=outof>richtig
beantwortet!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Dein Ergebnis:&nbsp;<input size=9 
name=percent>%</font></b></form></center>

</body>
</html>



_______________________________________
mfg
Thomas Mell

www.validome.org
28.05.2007 16:36:18
  Zitieren
zaphier
Mitglied

Registriert: 27.05.2007
Beiträge: 10
vielen vielen dank... das hat gefunzt *erleichtertist*
nur noch eine frage... mein netter dozent meinte, dass das name bei form name=... nicht mehr erlaubt ist in xhtml... was schreibe ich stattdessen?

lg zaphie
28.05.2007 17:48:35
  Zitieren
dkdenz
Administrator

Ort: Lübeck
Registriert: 25.04.2005
Beiträge: 605
Hallo
In XHTML 1.0 Strict ist es nicht erlaubt, siehe hier: http://www.validome.org/lang/ge/help_a/form
Aber es ist auch nicht erforderlich.
Viel Spaß noch...

_______________________________________
Mozilla/5.0 (X11; U; Linux i686; de; rv:1.8.0.14eol) Gecko/20080418 Ubuntu/dapper-security Firefox/1.5.0.12eol
28.05.2007 18:09:18
http://dkmd.de | http://dkdenz.de Zitieren
zaphier
Mitglied

Registriert: 27.05.2007
Beiträge: 10
ähm... es mag zwar nicht erforderlich sein... dieses action hingegen offenbar schon... jetzt ist es so... wenn ich da was ändern möchte, geht das quiz nicht mehr... und nun?

gruß zaphier
28.05.2007 18:41:18
  Zitieren
HTMELL
Administrator

Registriert: 11.05.2006
Beiträge: 544
Hi,
in XHTML ist so etwas natürlich nicht erlaubt -> document.forms["Quiz"].score.value = points;
Aber bekanntlicherweise führen viele Wege nach Rom ;-)
Ein Formular kann man auch über dessen Index ansprechen, z.B. erhält man mit document.forms[0] das erste form-Element im Dokument.
Weiterhin könnte man dies auch über das id-Attribut erledigen -> document.getElementById("meineID").
Mit getElementById kannst Du übrigens auf alle Elemente innerhalb des Dokumentes zugreifen - Du bräuchtest dann überhaupt kein form-Element.

_______________________________________
mfg
Thomas Mell

www.validome.org
28.05.2007 18:43:47
  Zitieren
dkdenz
Administrator

Ort: Lübeck
Registriert: 25.04.2005
Beiträge: 605
Oder auf Transitional wechseln... ;-)

_______________________________________
Mozilla/5.0 (X11; U; Linux i686; de; rv:1.8.0.14eol) Gecko/20080418 Ubuntu/dapper-security Firefox/1.5.0.12eol
28.05.2007 18:46:49
http://dkmd.de | http://dkdenz.de Zitieren
zaphier
Mitglied

Registriert: 27.05.2007
Beiträge: 10
also unser dozent faselte was von getElementById...
also wäre das eine dann so: document.getElementById("Quiz").score.value = points; usw...?? oder bin ich mal wieder auf dem falschen dampfer? und dann unten statt form... dann einfach nur Id...??
28.05.2007 18:51:54
  Zitieren
zaphier
Mitglied

Registriert: 27.05.2007
Beiträge: 10
würd ich gern dkdenz.... darf ich aber net, dann bekomme ich vom dozenten eins auf den deckel... ist bestandteil der aufgabe, dass alles in strict ist *kotz*
28.05.2007 18:56:31
  Zitieren
HTMELL
Administrator

Registriert: 11.05.2006
Beiträge: 544

also wäre das eine dann so: document.getElementById("Quiz").score.value = points;

Nein, Du musst dem Element "score" eine id geben und dann auf diese zugreifen.

Code:

<input size=5 id="score">...
document.getElementById("score").value


und dann unten statt form... dann einfach nur Id...??

Nein

Code:

<form id="Quiz">...

Im übrigen ist Dein Beispielcode alles andere als valides XHTML, jage mal das Dokument durch den Validator.

_______________________________________
mfg
Thomas Mell

www.validome.org
28.05.2007 20:38:52
  Zitieren
zaphier
Mitglied

Registriert: 27.05.2007
Beiträge: 10
ich versteh das validierungsprog net und versteh auch nicht was ich da jetzt ändern sol...

ich hasse es langsam aber sicher... da ist mir mein baukasten für meine hp lieber.... da muss ich mich mit soetwas nicht herumschlagen
28.05.2007 22:26:09
  Zitieren
zaphier
Mitglied

Registriert: 27.05.2007
Beiträge: 10
habe mal ein paar vermutlich seltendämliche fragen... der valodator mein zu mir... die input-tags sind nicht geschlossen....?????
muss ich das jetzt begreifen?  und dann das js teil... mosert er mir auch dran rum...(i=0; i<selCount; i++) wenn ich da jetzt das zweite simikolon wegnehmen würde.... dann würde es nimmer mehr funzen....
28.05.2007 23:10:15
  Zitieren
dkdenz
Administrator

Ort: Lübeck
Registriert: 25.04.2005
Beiträge: 605
Leere Tags müssen mit einem Backslash geschlossen werden: <input size=5  name=outof  />
Außerdem wäre es schick, wenn Du die Werte in " packen würdest: <input size="5"  name="outof"  />
Du wirst um etwas Lektüre nicht drumrum kommen.
Wir helfen ja gerne, aber für die Basics bist schon Du zuständig...

_______________________________________
Mozilla/5.0 (X11; U; Linux i686; de; rv:1.8.0.14eol) Gecko/20080418 Ubuntu/dapper-security Firefox/1.5.0.12eol
28.05.2007 23:23:21
http://dkmd.de | http://dkdenz.de Zitieren
zaphier
Mitglied

Registriert: 27.05.2007
Beiträge: 10
bin schon dabei... habe ich gerade herausgefunden was das ding von mir will.. *gg*

danke
29.05.2007 11:02:09
  Zitieren
Seiten: 1   Beitrag schreiben
Wechsel zu

Die letzten Beiträge aus diesen Forum

Valid HTML 4.01