Inputbox vervangen door ...?

Ultralord · 9 mrt 2010

Hoi,

Voor informatica hebben we een groot project om een quiz te maken en nou verschijnen de vragen in een inputbox zoals dit:

HTML:

<input NAME="choiceA" SIZE="75" style="font-family: Arial Narrow">
<input NAME="choiceB" SIZE="75" style="font-family: Arial Narrow">

Met nog veel lay out en div's er omheen...

Het script vult steeds een vraag in in deze inputbox.
Maar het nadeel is dat je de tekst zelf aan kan passen als je de quiz maakt. Kan ik dit ook veranderen, dat het geen inputbox is maar normale tekst oid?

Ik hoop dat iemand het begrijpt

Alvast bedankt!
- Michiel

Het hele script hier (html en javascript):

Code:

<html> 
 
<head> 
<script LANGUAGE="JavaScript"> 
 
<!-- hide this script tag's contents from old browsers ---  >


function jumpBox(list) {
   location.href = list.options[list.selectedIndex].value
   }
function init() 
              {
 
                             
 
              questions = new Array()
              questions[1] = "Hoe hard mag je met je brommer buiten de bebouwde kom?"
              questions[2] = "Hoe kan je het beste zorgen dat je over de kop vliegt op je brommer?"
              questions[3] = "Moet je rechts of links rijden?"
 
              answerA = new Array()
              answerA[1] = "25 KM/H"
              answerA[2] = "Met je voorrem remmen"
              answerA[3] = "Rechts natuurlijk"
 
              answerB = new Array()
              answerB[1] = "35 KM/H"
              answerB[2] = "Ergens met volle snelheid tegenaan botsen"
              answerB[3] = "Links, rechts is voor watjes!"
 
              answerC = new Array()
              answerC[1] = "45 KM/H"
              answerC[2] = "Met je achterrem, toch?"
              answerC[3] = "Soms links soms rechts"

 
              rightAns = new Array
              rightAns[1] = "c"
              rightAns[2] = "a"
              rightAns[3] = "a"

              } 
 
function nextQuestion(form)
 
{   var quizEnd = eval(3 * 1);
 
    if(form.questNo.value == quizEnd) {
 
       form.question.value = "";
 
       form.choiceA.value = "";
 
       form.choiceB.value = "";
 
       form.choiceC.value = "";
 
       form.yourChoice.value = "";
 
       form.results.value = "Einde van de Quiz.  Je resultaten staan hieronder."; } else {
 
    if(form.questNo.value == "") {form.questNo.value = 1} else {
    
       form.questNo.value = eval(form.questNo.value) + 1;
 
    }
 
    form.question.value = questions[form.questNo.value];
 
    form.choiceA.value = answerA[form.questNo.value];
 
    form.choiceB.value = answerB[form.questNo.value];
 
    form.choiceC.value = answerC[form.questNo.value];
 
    form.yourChoice.value = "";
 
    form.results.value = "";
 
    if(form.myScore.value == "") {form.myScore.value = 0; } else {
                                                  form.myScore.value = form.myScore.value; }
 
   }
 
}
 
   function verbergen(){
      document.getElementById('mijnbutton').value='Volgende vraag';
   }
   function checkAnswer(form) {
      
      var myScore = 0;
      var curve = 0;
 
      if(form.results.value != "") {form.results.value = "Sorry, raden mag je niet hoor!. Als je deze vraag opnieuw wilt doen, moet je de Quiz overnieuw starten.  Klik op ''Volgende vraag'' om verder te gaan."; }
 
      else if(form.yourChoice.value == rightAns[form.questNo.value]) {
      form.myScore.value = eval(form.myScore.value) + eval(1);
      form.results.value = ""; } else {
      
      form.results.value = "" + reference[form.questNo.value] + "" }
 
   
   curve = form.myScore.value / form.questNo.value;
 
   form.percent.value = parseInt(curve * 100,10);
   
   if(curve > .90) {form.grade.value = "A"; } else if(curve > .80) {form.grade.value = "B"; } else if(curve > .70) {form.grade.value = "C"; } else if(curve > .60) {form.grade.value = "D"; } else {form.grade.value = "F"; }
    }
 
 
function clearForm(form)
 
{
 
    
    form.questNo.value = "";
    form.mijnbutton.value = "Start quiz";
    form.question.value = "";
    form.choiceA.value = "";
    form.choiceB.value = "";
    form.choiceC.value = "";
    form.yourChoice.value = "";
    form.results.value = "";
    form.myScore.value = "";
    form.percent.value = "";
    form.grade.value = "";
    
 
}
 
 
 
<!-- done hiding from old browsers -->
 
 
 
</script> 
 
<title>JavaScript Quiz</title> 
</head> 

<body TEXT="#000000" BGCOLOR="#ffcc00" LINK="red" VLINK="purple" ALINK="blue" onLoad="init()" background="../images/achtergrond002.gif" bgproperties="fixed"> 


<form method="POST"> 
  <div align="left"><p><small>
  <table BORDER="0"> 



<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


<!--Start opnieuw-->
<input TYPE="reset" VALUE="Start opnieuw" onClick="clearForm(this.form)">

<!--Plaatje-->
<div style="position:absolute;top:100;left:750;background-color:green;width:500px;height:300"><img border="0" src="http://www.diamondrijschool4all.nl/img/brommer2.jpg" width="500" height="300" />
</div> 

<!--Vraag cijfer-->
<div style="position:absolute;top:100;left:100;background-image: url(http://www.sumopaint.com/files/images800/dixfffzcxigimjin.jpg);width:100px;height:130">
<div style="font-family:arial;font-size:60;position:absolute;top:30;left:35"><font face="Arial" color="#FFFFFF"><input TYPE="TEXT" NAME="questNo" SIZE="4"></font>
</div>
</div>


<!--Vraag-->
<div style="position:absolute;top:100;left:240;background-image: url(http://www.sumopaint.com/files/images800/dixffeznilcxhamj.jpg);width:500px;height:130"
<div style="font-family:arial;font-size:20;position:absolute;top:10;left:20">
<p><font face="Arial" color="#FFFFFF"><small><textarea COLS="70" ROWS="2" name="question" wrap="virtual" style="font-family: Arial Narrow"></textarea></small></font>
</div>
</div>


<!--Letter A-->
<div style="position:absolute;top:270;left:100;background-image: url(http://www.sumopaint.com/files/images800/dixfffzcxigimjin.jpg);width:100px;height:130"
<div style="font-family:arial;font-size:60;position:absolute;top:30;left:35">A.
</div>
</div>

<!--Antwoord 1-->
<div style="position:absolute;top:270;left:240;background-image: url(http://www.sumopaint.com/files/images800/dixffeznilcxhamj.jpg);width:500px;height:130"
<div style="font-family:arial;font-size:20;position:absolute;top:40;left:35">
<input NAME="choiceA" SIZE="75" style="font-family: Arial Narrow">
</div>
</div>

<!--Letter B-->
<div style="position:absolute;top:440;left:100;background-image: url(http://www.sumopaint.com/files/images800/dixfffzcxigimjin.jpg);width:100px;height:130"
<div style="font-family:arial;font-size:60;position:absolute;top:30;left:35">B.
</div>
</div>

<!--Antwoord 2-->
<div style="position:absolute;top:440;left:240;background-image: url(http://www.sumopaint.com/files/images800/dixffeznilcxhamj.jpg);width:500px;height:130"
<div style="font-family:arial;font-size:20;position:absolute;top:40;left:35">
<input NAME="choiceB" SIZE="75" style="font-family: Arial Narrow">
</div>
</div>

<!--Uw keuze-->
<div style="position:absolute;top:440;left:750;background-image: url(http://www.sumopaint.com/files/images800/dixffeznilcxhamj.jpg);width:500px;height:130"
<div style="font-family:arial;font-size:20;position:absolute;top:30;left:35">
<b>Uw keuze: &nbsp;&nbsp;&nbsp;</b><input NAME="yourChoice" SIZE="4" style="font-family: Arial Narrow">&nbsp;&nbsp;&nbsp;<input TYPE="button" VALUE="OK" onClick="checkAnswer(this.form)">
</div>
</div>

<!--Letter C-->
<div style="position:absolute;top:610;left:100;background-image: url(http://www.sumopaint.com/files/images800/dixfffzcxigimjin.jpg);width:100px;height:130"
<div style="font-family:arial;font-size:60;position:absolute;top:30;left:35">C.
</div>
</div>

<!--Antwoord 3-->
<div style="position:absolute;top:610;left:240;background-image: url(http://www.sumopaint.com/files/images800/dixffeznilcxhamj.jpg);width:500px;height:130"
<div style="font-family:arial;font-size:20;position:absolute;top:40;left:35">
<input NAME="choiceC" SIZE="75" style="font-family: Arial Narrow">
</div>
</div>

<!--Start quiz en volgende vraag-->
<div style="position:absolute;top:610;left:750;background-image: url(http://www.sumopaint.com/files/images800/dixffeznilcxhamj.jpg);width:500px;height:130"
<div style="font-family:arial;font-size:20;position:absolute;top:30;left:35">
<input type="button" id='mijnbutton' value = "Start quiz" onclick = "nextQuestion(this.form);verbergen();">
</div>
</div>


<!--Resultaat-->
Resultaat:
<textarea COLS="70" ROWS="3" name="results" wrap="virtual" style="font-family: Arial Narrow"></textarea>
Score tot nu toe:
      Punten:<input NAME="myScore" SIZE="4" style="font-family: Arial Narrow">&nbsp;&nbsp;<b>Percentage:</b><input NAME="percent" SIZE="6" style="font-family: Arial Narrow">% juist beantwoord.


<!--Uw keuze tekst-->
<b>Uw keuze:</b>



  </table> 
  </div> 
</form>

<p align="center">&nbsp;</p> 
<script LANGUAGE="JavaScript"> 
 
<!-- 
function stopError() { 
return true; 
 
} 
 
window.onerror = stopError; 
 
// --> 
 
</script> 
 
</body> 
</html>

city guy · 9 mrt 2010

Hi,

om het probleem te ondervangen was mijn eerste gedachte:

misschien gebruikmaken van een INPUT TYPE="hidden" (als extra en ter controle)

of

een LABEL tag met een bijbehorende type=submit button. Misschien met wat Javascript kan LABEL de inputbutton-functie overnemen

city guy · 9 mrt 2010

Hi,
ik was vergeten:

INPUT heeft een read-only attribute

HTML:

<input type="text" name="country" value="Norway"
  readonly="readonly"

bron: w3schools.com

That Guy · 9 mrt 2010

Je kan uiteraard ook DOM gebruiken en zo de vragen in een <div> element stoppen. Maar sinds je scipt al zo erg input-elementent heeft ingeboud, is de readonly een stuk handiger.

Ultralord · 11 mrt 2010

Bedankt voor de reacties!

Ik ga idd gewoon een readonly gebruiken, veel makkelijker dan alles in normale tekst veranderen want het script moet de antwoorden er in kunnen zetten.

:thumb:

Inputbox vervangen door ...?

Ultralord

Gebruiker

city guy

Gebruiker

city guy

Gebruiker

That Guy

Meubilair

Ultralord

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy