FRAGE: Ich möchte eine Art Multiple Choice Test mit Antworten mit Javascript machen

A

anyopp

New member
Ich möchte eine Art Hauttypen-Test erstellen, in dem man verschiedene Fragen beantwortet und es einem ausgibt, welcher Hauttyp man zu wie viel Prozent ist, und zwar auf einer Website; mein Ansatz ist hier: :confused:

HTML: 
<!DOCTYPE  html>
<html>
	<head>
		<title id="Titel">Logona</title>   
		<link rel="stylesheet" href="style.css" type="text/css" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<script language="javascript" type="text/javascript"/>

		<script>
		
		    var HauttypA = 0;
			var HauttypB = 0;
			var HauttypC = 0;
			var HauttypD = 0;	
		
		  if(document.getElementById("q1a").checked) {
          HauttypA = HauttypA + 1;
          }else if(document.getElementById('g1b').checked) {
          HauttypB = HauttypB + 1;
		  }else if(document.getElementById('g1c').checked){
		  HauttypC = HauttypC + 1;
		  }else if(document.getElementById('g1d').checked){
		  HauttypD = HauttypD + 1;
		  }
		  
		  if(document.getElementById("q2a").checked) {
          HauttypA = HauttypA + 1;
          }else if(document.getElementById('g2b').checked) {
          HauttypB = HauttypB + 1;
		  }else if(document.getElementById('g2c').checked){
		  HauttypC = HauttypC + 1;
		  }else if(document.getElementById('g2d').checked){
		  HauttypD = HauttypD + 1;
		  }
		  
		  if(document.getElementById("q3a").checked) {
          HauttypA = HauttypA + 1;
          }else if(document.getElementById('g3b').checked) {
          HauttypB = HauttypB + 1;
		  }else if(document.getElementById('g3c').checked){
		  HauttypC = HauttypC + 1;
		  }else if(document.getElementById('g3d').checked){
		  HauttypD = HauttypD + 1;
		  }
		  
		  if(document.getElementById("q4a").checked) {
          HauttypA = HauttypA + 1;
          }else if(document.getElementById('g4b').checked) {
          HauttypB = HauttypB + 1;
		  }else if(document.getElementById('g4c').checked){
		  HauttypC = HauttypC + 1;
		  }else if(document.getElementById('g4d').checked){
		  HauttypD = HauttypD + 1;
		  }
		  
		  if(document.getElementById("q5a").checked) {
          HauttypA = HauttypA + 1;
          }else if(document.getElementById('g5b').checked) {
          HauttypB = HauttypB + 1;
		  }else if(document.getElementById('g5c').checked){
		  HauttypC = HauttypC + 1;
		  }else if(document.getElementById('g5d').checked){
		  HauttypD = HauttypD + 1;
		  }

	     if(document.getElementById("q5a, q5b, q5c, q5d").checked) {
		  
		 
		  
		  if(HauttypA => 5){
	  var Eins = 'Du bist zu 100% Hauttyp A';
		  }else if(HauttypA = 4){
      var Eins = 'Du bist zu 80% Hauttyp A';
		  }else if(HauttypA = 3){
      var Eins = 'Du bist zu 60% Hauttyp A';
		  }else if(HauttypA = 2){
	  var Eins = 'Du bist zu 40% Hauttyp A';
		  }else if(HauttypA = 1){
	  var Eins = 'Du bist zu 20% Hauttyp A';
		  }else if(HauttypA = 0){
	  var Eins = 'Du bist zu 0% Hauttyp A';
		  }
		  
		  if(HauttypB => 5){
	  var Zwei = 'Du bist zu 100% Hauttyp B';
		  }else if(HauttypB = 4){
      var Zwei = 'Du bist zu 80% Hauttyp B';
		  }else if(HauttypB = 3){
	  var Zwei = 'Du bist zu 60% Hauttyp B';
		  }else if(HauttypB = 2){
	  var Zwei = 'Du bist zu 40% Hauttyp B';
		  }else if(HauttypB = 1){
	  var Zwei = 'Du bist zu 20% Hauttyp B';
		  }else if(HauttypB = 0){
	  var Zwei = 'Du bist zu 0% Hauttyp B';
		  }
		  
		  if(HauttypC => 5){
	  var Drei = 'Du bist zu 100% Hauttyp C';
		  }else if(HauttypC = 4){
      var Drei = 'Du bist zu 80% Hauttyp C';
		  }else if(HauttypC = 3){
	  var Drei = 'Du bist zu 60% Hauttyp C';
		  }else if(HauttypC = 2){
	  var Drei = 'Du bist zu 40% Hauttyp C';
		  }else if(HauttypC = 1){
	  var Drei = 'Du bist zu 20% Hauttyp C';
		  }else if(HauttypC = 0){
	  var Drei = 'Du bist zu 0% Hauttyp C';
		  }
		  
		  if(HauttypD => 5){
	  var Vier = 'Du bist zu 100% Hauttyp D';
		  }else if(HauttypD = 4){
      var Vier = 'Du bist zu 80% Hauttyp D';
		  }else if(HauttypD = 3){
	  var Vier = 'Du bist zu 60% Hauttyp D';
		  }else if(HauttypD = 2){
	  var Vier = 'Du bist zu 40% Hauttyp D';
		  }else if(HauttypD = 1){
	  var Vier = 'Du bist zu 20% Hauttyp D';
		  }else if(HauttypD = 0){
	  var Vier = 'Du bist zu 0% Hauttyp D';
		  }
		  
		   alert("'Eins'\n  + 'Zwei'\n  + 'Drei'\n  + 'Vier'");}
	   
        </script>
		
</head>
<body>	

<p class="question">Frage1</p>
 <ul class="answers">
 <input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Antwort1</label><br/>
 <input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Antwort2</label><br/>
 <input type="radio" name="q1" value="c" id="q1c"><label for="q1c">Antwort3</label><br/>
 <input type="radio" name="q1" value="d" id="q1d"><label for="q1d">Antwort4</label><br/>
 </ul> 
 
 <p class="question">Frage2</p>
 <ul class="answers">
 <input type="radio" name="q2" value="a" id="q2a"><label for="q2a">Antwort1</label><br/>
 <input type="radio" name="q2" value="b" id="q2b"><label for="q2b">Antwort2</label><br/>
 <input type="radio" name="q2" value="c" id="q2c"><label for="q2c">Antwort3</label><br/>
 <input type="radio" name="q2" value="d" id="q2d"><label for="q2d">Antwort4</label><br/>
 </ul>
 
 <p class="question">Frage3</p>
 <ul class="answers">
 <input type="radio" name="q3" value="a" id="q3a"><label for="q3a">Antwort1</label><br/>
 <input type="radio" name="q3" value="b" id="q3b"><label for="q3b">Antwort2</label><br/>
 <input type="radio" name="q3" value="c" id="q3c"><label for="q3c">Antwort3</label><br/>
 <input type="radio" name="q3" value="d" id="q3d"><label for="q3d">Antwort4</label><br/>
 </ul>
 
 <p class="question">Frage4</p>
 <ul class="answers">
 <input type="radio" name="q4" value="a" id="q4a"><label for="q4a">Antwort1</label><br/>
 <input type="radio" name="q4" value="b" id="q4b"><label for="q4b">Antwort2</label><br/>
 <input type="radio" name="q4" value="c" id="q4c"><label for="q4c">Antwort3</label><br/>
 <input type="radio" name="q4" value="d" id="q4d"><label for="q4d">Antwort4</label><br/>
 </ul>
 
 <p class="question">Frage5</p>
 <ul class="answers">
 <input type="radio" name="q5" value="a" id="q5a"><label for="q5a">Antwort1</label><br/>
 <input type="radio" name="q5" value="b" id="q5b"><label for="q5b">Antwort2</label><br/>
 <input type="radio" name="q5" value="c" id="q5c"><label for="q5c">Antwort3</label><br/>
 <input type="radio" name="q5" value="d" id="q5d"><label for="q5d">Antwort4</label><br/>
 </ul>

	
</body>
</html>


Es zeigt auf der Website zwar die Fragen, die man auch auswählen kann, an aber alles was in Javascript steht, macht er nicht.
Meine Javascript Kenntnisse sind leider nicht so gut und Ich bin echt ratlos, es wäre super, wenn mir bitte jemand helfen könnte :)
 
Zuletzt bearbeitet von einem Moderator:
Hi,

erstmal, die Zeile <script language="javascript" type="text/javascript"/> ist überflüssig, die kannst du entfernen. Dann fehlen dir sogenannte Klick-Handler. Diese Handler sorgen dafür, dass der Code bei einer Benutzeraktion (in dem Fall Klick) aufgerufen wird. Schau dir mal das onclick (onclick Event) Attribut an.


(BTW: Thema freigeschaltet.)
 
Ich würde die <script>-Node ja direkt vor das </body> schieben. Dann bekommst du erst mal keine Fehlermeldungen in der Fehlerkonsole mehr. Zusätzlich siehst du dann, dass dein Code zu früh ausgeführt wird (wie rico ja schon angemerkt hat).
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben