Quiz con javascript

**Ale Barbieri** · 16-06-2005, 11:58

Ho un problema: vorrei creare un quiz in html con dei javascript. In questo quiz bisogna indovinare due parole ke verrano scritte dal risolutore in due campi "text". Premendo poi un bottone, vorrei fare in modo ke se le risposte sono giuste (entrambe) venga fuori un alert con scrito "Risposta esatta" (o qualcosa del genere) e che passi a l'altra domanda contenuta nel file "dom2.htm", mentre se sono sbagliate venga fuori un alert con scritto che le risposte sono sbagliate. Inoltre mi piacerebbe anche che se una sola risposta è sbagliata e l'altra giusta venisse un alert con scritto che una sola risposta è sbagliata. Naturalmente se una o tutte e due le risposte sono sbagliate il risolutore deve prima correggerle e nn passare alla domanda successiva. Qualcuno potrebbe scrivermi il codice?

Ecco il codice del quiz

Le risposte sono "collo" e "callo")

<html>
<head>
<title>Quiz1 - Domanda 1</title>

</head>
<body>
<body bgcolor="white">

<h1 align=center>Quiz</h1>

<hr color="red" size="5">

<h5 align=center>Domanda 1</h5>

<p align=center>CAMBIO DI VOCALE (es.: grOsso, grAsso)</p>
<p align=center>Stavo proprio male
Andai dal dottore,
perché avevo male al xxxxx,

e disse con stupore
che in realtà a far male
era il xyxxx</p>

<p align=center>Inserisci qua la prima parola: <form><input type="text" name="text1"></form> Inserisci qua la
seconda: <form><input type="text" name="text2"></form></p>

<p align=center>Dopo aver scritto le risposte, <form><input type="button" value="clicca qua"
onclick="risposta"></form></p>

**Xinod** · 16-06-2005, 21:00

intanto usa un unico form che contenga i 2 campi testo e il pulsante di invio
e assegna a questo form un name="nomeForm"

codice:

function risposta(){
  var f=document.nomeForm;
  if(f.text1.value=='collo' && f.text2.value=='callo'){
    alert('bravo! ok per continuare')
    self.location.href="dom2.htm";
  }
  else if(f.text1.value=='collo' || f.text2.value=='callo' ){
    alert('spiacente, ne hai indovinata una sola...');
  }
  else {
    alert('non ci siamo... :nonono: ');
  }
}

ciao

**Ale Barbieri** · 17-06-2005, 12:24

Ho fatto tutto, ma nn mi funziona (il file "dom2.htm" è nella cartella "Nuova cartella", la quale è nascosta e si trova nella stessa del file che ti ho chiesto di modificarmi)

Ecco come ho fatto:

codice:

<html>
<head>
<title>Quiz1 - Domanda 1</title>

<script language="javascript">
function risposta(){
  var f=document.nomeForm;
  if(f.text1.value=='collo' && f.text2.value=='callo'){
    alert('Bravo! Ok per continuare')
    self.location.href="Nuova cartella/dom2.htm";
  }
  else if(f.text1.value=='collo' || f.text2.value=='callo' ){
    alert('Spiacente, ne hai indovinata una sola...');
  }
  else {
    alert('Non ci siamo...');
  }
}  
</script>

</head>
<body>
<body bgcolor="white">

<h1 align=center>Quiz</h1>


<hr color="red" size="5">


<h5 align=center>Domanda 1</h5>






<p align=center>CAMBIO DI VOCALE (es.: grOsso,  grAsso)</p>
<p align=center>Stavo proprio male
Andai dal dottore,
perché avevo male al xxxxx,
                                         
e disse con stupore
che in realtà a far male
                                         era il xyxxx</p>




<p align=center>Inserisci qua la prima parola: <form name="nomeForm"><input type="text" name="text1">   Inserisci qua la
seconda: <input type="text" name="text2"></p>



<p align=center>Dopo aver scritto le risposte, <input type="button" value="clicca qua"
onclick="risposta"></form></p>

**badaze** · 17-06-2005, 12:40

L'anno scorso ho fatto questo per un utente del forum. Se ti puo' servire...

Attento : alcune righe possono essere spezzate

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.badQuestionTitle {background-color:blue;color:white;font-family:verdana;font-size:12pt;font-weight:bold}
.badAnswer        {color:black;font-family:verdana;font-size:10pt;}
.badQuestionnaire {background-color:#ffffcc;}
.badContainer     {background-color:#000080;}
-->
</style>

</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
//-------------- Constants
var yourScoreComment    = "Il tuo punteggio";
var maxScoreComment     = "Punteggio totale";
var answerButtonComment = "Rispondi";
var resultComment       = "Risultato del test";


// ========================================
//------------- Questionnaires object definition
// ========================================
function  questionnaireObj(questionnaireStringName,questionsNumber) {
 if (questionsNumber == null) {
  alert('Enter the questions number as a parameter');
	return;
 } // if (questionsNumber == null)
 //----------- Questionnaire Name
 this.name         = questionnaireStringName;
 //----------- Max Score / Current score / urrent question
 this.totalScore      = 0; 
 this.currentScore    = 0;
 this.currentQuestion = 0; 
 //--------- object names
 this.containerDiv        = 'container'+this.name;
 this.questionnaireDiv    = 'questionnaire'+this.name; 
 this.questionnaireResult = 'questionnaireResult'+this.name; 
 //------------ Methods
 this.draw         = _draw;
 this.subDraw      = _subDraw;
 this.nextQuestion = _nextQuestion;
 this.end          = _end;
 //----------- Initiliazing Questions
 this.questions    = new Array(questionsNumber);
 var i = 0;
 for(i=0;i<questionsNumber;i++) {
  this.questions[i] = new questionObj(this);
 } // for(i=0;i<questionsNumber;i++)
 //--------- Initialize questionnaire result
 this.result  = new QuestionnaireResult(this);
 //--------- Creates the container
 var html0 = "";  
 html0    += "<div id='"+this.containerDiv+"' class='badContainer'>";
 html0    += "</div>"; 
 document.write(html0);
} // function questionnaireObj(questionsNumber)

//------------- Function draw questionnaire
function _draw(aQuestionNumber) {
 if (aQuestionNumber == null) {
  aQuestionNumber = 0;
 } // if (aQuestionNumber == null) 
 //----------- Sets the current question
 this.currentQuestion = aQuestionNumber; 	 
 //--------- Resets container Content
 document.getElementById(this.containerDiv).innerHTML = "";   
 //--------- Creates the questionnaire
 var html1 = "";  
 html1    += "<div id='"+this.questionnaireDiv+"' class='badQuestionnaire'>";
 html1    += "</div>"; 
 document.getElementById(this.containerDiv).innerHTML = html1;  
 //--------- Resets  
 document.getElementById(this.questionnaireDiv).innerHTML = "";
 //--------- Creates the possible answers  
 var html2 = this.subDraw(aQuestionNumber);
 document.getElementById(this.questionnaireDiv).innerHTML = html2; 
 //--------- Creates the button
 pulse = '<center><input type="button" value="'+answerButtonComment+'" onclick="'+this.name+'.nextQuestion()"></center>';
 document.getElementById(this.containerDiv).innerHTML += pulse; 
} // _draw()

function _subDraw(aQuestionNumber) {
  var html2  = '<center class="badQuestionTitle">'+this.questions[aQuestionNumber].questionTitle+'</center>
';
	var len2   = this.questions[aQuestionNumber].questionsNum;
	var j      = 0;
	for (j=0;j<len2;j++) {
	 selected = "";
	 if (j==0) {
	  selected = "checked";
	 } // if (j==0)
	 html2 +='<input type="radio" value="'+j+'" name="itemQ" id="q'+j+'"'+selected+' >'
	 html2 +='<span class="badAnswer">'+ this.questions[aQuestionNumber].items[j]+'</span>
';
	} // for (j=0;j<len2;j++)
	return html2;
} // function _subDraw(anElement

function _nextQuestion() {
 //---------- Controls the answer
 var len2   = this.questions[this.currentQuestion].questionsNum;
 for (j=0;j<len2;j++) {
  //---------- Retrieves if radio was checked
  curRadio = document.getElementById('q'+j).checked;
	//---------- Tests wether checked radio is the correct answer
	if (curRadio && (j == this.questions[this.currentQuestion].goodAnswer || this.questions[this.currentQuestion].itemPoints[j] != null)) {
   //----------- Current score
	 if (this.questions[this.currentQuestion].itemPoints[j] != null) {
    this.currentScore += this.questions[this.currentQuestion].itemPoints[j];	 
	 } else {
    this.currentScore += this.questions[this.currentQuestion].points;
	 } // if (this.itemPoints[this.currentQuestion] != null)	
	} // if (curRadio && (j== this.questions[this.currentQuestion].goodAnswer)
 } // for (j=0;j<len2;j++) 
 //---------- Tests wether we reach last question
 if (this.currentQuestion+1>this.questions.length || this.questions[this.currentQuestion+1].questionTitle == "") {
  this.end();
	return;
 } // if (this.currentQuestion+1>this.questions.length || this.questions[this.currentQuestion+1].questionTitle == "") 
 //---------- Draws the next question
 this.currentQuestion++;
 this.draw(this.currentQuestion);
} // function _nextQuestion()

function _end() {
 //--------- Resets container Content
 document.getElementById(this.containerDiv).innerHTML = ""; 
 var html1 = "";  
 html1    += "<div id='"+this.questionnaireResult+"' class='badQuestionnaire'>";
 html1    += "</div>"; 
 document.getElementById(this.containerDiv).innerHTML = html1;   
 //--------- Creates the result
 var html  = '<center class="badQuestionTitle">'+resultComment+'</center>

';
 html     += '<span class="badAnswer">'+yourScoreComment + ":"+this.currentScore+"</span>
";
 //--------- Se non si tratta di un questionnario a punteggio
 if (this.questions[0].itemPoints[0] == null) {
  html     += '<span class="badAnswer">'+maxScoreComment  + ":"+this.totalScore+"</span>
";    
 } // if (this.questions[0].itemPoints[0] == null)
 //--------- Risultato del punteggio
 if (this.result.index != 0) {
  html += '<span class="badAnswer">'+this.result.showResult()+"</span>
";
 } // if (this.result.index != 0) 
 html += '

';
 //--------- Assegnazione codice HTML
 document.getElementById(this.questionnaireResult).innerHTML = html; 
} // function _end()

// ========================================
//------------- Questions object definition
// ========================================
function questionObj(parent) {
 this.questionTitle = "";
 this.points        = 0;
 this.questionsNum  = 0;
 this.goodAnswer    = 0;
 this.items         = new Array();
 this.itemPoints    = new Array(); 
 //------------ Methods
 this.setTitle      = _setTitle;
 this.getTitle      = _getTitle;
 this.setPoints     = _setPoints;
 this.getPoints     = _getPoints; 
 this.addAnswer     = _addAnswer;
 //------------ Parent
 this.parent        = parent; 
} // function questionObj()

//---------- Sets the title
function _setTitle(aTitle) {
 this.questionTitle = aTitle;
 this.points        = 1;  
 //------------ Adding to total score
 this.parent.totalScore += this.points; 
} // function _setTitle(aTitle)

//---------- Gets the title
function _getTitle() {
 return this.questionTitle;
} // function _getTitle(aTitle)

//---------- Sets the question's score
function _setPoints(points) {
 //---------- Decrements former score
 this.parent.totalScore -= this.points
 this.points = points;
 //------------ Adding to total score
 this.parent.totalScore += this.points; 
} // function _setPoints(points)

//---------- Sets the question's score
function _getPoints() {
 return this.points;
} // function _getPoints(points)

//---------- Adds an answer
function  _addAnswer(questionText,isGoodAnswerOrPoints) {
 if (isGoodAnswerOrPoints == true) {
   this.goodAnswer = this.questionsNum;
 } // if (isGoodAnswer == true)
 this.items[this.questionsNum] = questionText;
 if (parseInt(isGoodAnswerOrPoints) == isGoodAnswerOrPoints) {
  this.itemPoints[this.questionsNum] = isGoodAnswerOrPoints; 
 } else {
  this.itemPoints[this.questionsNum] = null; 
 } // if (parseInt(isGoodAnswerOrPoints) == isGoodAnswerOrPoints)
 this.questionsNum++
} // function items()
// ========================================

// ========================================
//------------- QuestionnaireResult object definition
// ========================================
function QuestionnaireResult(parent) {
 this.minValue   = new Array();
 this.maxValue   = new Array();
 this.comment    = new Array();
 this.index      = 0;
 //------------ Methods
 this.add        = _add;
 this.showResult = _drawResult;
 //------------ Parent
 this.parent   = parent;  
} // function _report(minValue,maxValue,comment)

function _add(minValue,maxValue,comment) {
 this.minValue[this.index] = minValue;
 this.maxValue[this.index] = maxValue;
 this.comment[this.index]  = comment;
 this.index++;
} // function _add(minValue,maxValue,comment)

function _drawResult() {
 len   = this.minValue.length;
 score = this.parent.currentScore
 for (i=0;i<len;i++) {
  if (this.minValue[i] <= score && score <= this.maxValue[i]) {
	 return this.comment[i];
	} // if (this.minValue[i] <= score && score <= this.maxValue[i])
 } // for (i=0;i<len;i++) 
} // function _drawResult()
//-->
</script>


Primo questionario : 
<script language="JavaScript" type="text/javascript">
<!--
// ========================================
// uso dell'oggetto
// ========================================
//----------- definisce un questionnario di 6 questioni
var questionnaire = new questionnaireObj('questionnaire',6);
//---------- domanda 1
questionnaire.questions[0].setTitle("Ultimo re di Francia");
questionnaire.questions[0].setPoints(10);
questionnaire.questions[0].addAnswer("Luigi XVI");
questionnaire.questions[0].addAnswer("Luigi XVII");
questionnaire.questions[0].addAnswer("Luigi XVIII");
questionnaire.questions[0].addAnswer("Carlo X");
//------------- Buona risposta
questionnaire.questions[0].addAnswer("Luigi Filippo I",true);
//---------- domanda 2
questionnaire.questions[1].setTitle("Data della rivoluzione francese");
questionnaire.questions[1].setPoints(10);
questionnaire.questions[1].addAnswer("14 luglio 1798");
//------------- Buona risposta
questionnaire.questions[1].addAnswer("14 luglio 1789",true);
questionnaire.questions[1].addAnswer("14 luglio 1790");
questionnaire.questions[1].addAnswer("14 luglio 1799");
questionnaire.questions[1].addAnswer("Mai");
questionnaire.questions[1].addAnswer("Domani (forse)");
//--------- Stampa a video
questionnaire.draw();
//-->
</script>






Secondo questionario :
<div style="width:400">
<script language="JavaScript" type="text/javascript">
<!--
//----------- definisce un questionnario di 6 questioni
var q = new questionnaireObj('q',6);
//---------- domanda 1
q.questions[0].setTitle("Per te il massimo della cucina è....");
//---------- secondo parametro = punteggio
q.questions[0].addAnswer("La pizza",2);
q.questions[0].addAnswer("Le patate frite",1);
q.questions[0].addAnswer("Le rane alla provenzale",2);
q.questions[0].addAnswer("Le boeuf bourguignon",3);
q.questions[0].addAnswer("I sushi",1);
//---------- domanda 2
q.questions[1].setTitle("La macchina dei tuoi sogni....");
q.questions[1].addAnswer("Lada 110",0);
q.questions[1].addAnswer("Nuova Panda",1);
q.questions[1].addAnswer("Lancia Ypsilon",2);
q.questions[1].addAnswer("Un trattore della lamborghini",1);
//---------- domanda 3
q.questions[2].setTitle("Preferisci....");
q.questions[2].addAnswer("Le bionde",1);
q.questions[2].addAnswer("Le more",1);
q.questions[2].addAnswer("Le rosse",2);
q.questions[2].addAnswer("Tutte",3);
//---------- Risultato
q.result.add(2,2,"Hai 2 punti");
q.result.add(3,5,"Hai tra 3 e 5 punti");
q.result.add(6,999,"Hai più di 5 punti");

//--------- Stampa a video
q.draw();

//-->
</script>
</div>
</body>
</html>

**Xinod** · 17-06-2005, 12:58

onclick="risposta()"

**Ale Barbieri** · 17-06-2005, 14:08

Hai ragione! Che stupido!

Grazie!

Un grazie anke a badaze

Discussione: Quiz con javascript

Strumenti discussione

Ricerca discussione

Visualizza

Quiz con javascript

Permessi di invio