Skip to content

Instantly share code, notes, and snippets.

@ricardosiri68

ricardosiri68/application.js

Last active April 23, 2016 05:45
Show Gist options
  • Save ricardosiri68/f7a5b2f6ab6b561d4578690f82751986 to your computer and use it in GitHub Desktop.
Save ricardosiri68/f7a5b2f6ab6b561d4578690f82751986 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
application.js
(function(){
var MultipleChoice = function(){
var radios = document.querySelectorAll("input[type=radio]");
var submitBtn = document.getElementById("show_results");
for(var i = 0; i < radios.length; i++) {
radios[i].addEventListener("click", this.selectAnswer.bind(this));
}
submitBtn.addEventListener("click", this.getScore.bind(this));
};
MultipleChoice.prototype = {
user_response: [],
solutions: [null, "a", "a", "d", "b", "a"],
selectAnswer: function(e){
var input = e.target;
var preguntaIndex = parseInt(input.getAttribute("data"), 10);
this.user_response[preguntaIndex] = input.value;
},
getScore: function(e){
e.preventDefault();
var resultsBlck = document.getElementById("resultados");
var answerText = "RESULTADOS\n";
var score = 0;
if (this.user_response.length < this.solutions.length){
alert("debe contestar todas las preguntas");
return;
}
for (var i = 1; i < this.solutions.length; i++) {
answerText += "Pregunta " + i + ": ";
if (this.solutions[i] != this.user_response[i]) {
answerText += "la respuesta correcta es " + this.solutions[i] + "\n";
} else {
answerText += "bien\n";
score++;
}
}
answerText += "\npuntos:" + score;
answerText += "\nDiagnostico:";
if (score === 0) answerText += "Malo";
else if (score >= 1 && score <= 2) answerText += "Regular";
else if (score >= 3 && score <= 4) answerText += "Bueno";
else if (score >= 5 ) answerText += "Excelente";
resultsBlck.innerText = answerText;
}
};
window.addEventListener("load", function(){ new MultipleChoice; }, false);
}());
Raw
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cuestionario</title>
<script src="application.js" type="text/javascript"></script>
</head>
<body>
<form id="cuestionario">
<fieldset>
<p class="question">
1. ¿En qué lugar se ejecuta generalmente el código Javascript?<br>
</p>
<p>
<input type="radio" name="R1" value="a" data="1"/>
<label for="">a) Respuesta correcta</label>
</p>
<p>
<input type="radio" name="R1" value="b" data="1"/>
<label for=""> b) Respuesta </label>
</p>
<p>
<input type="radio" name="R1" value="c" data="1"/>
<label for=""> c) Respuesta </label>
</p>
<p>
<input type="radio" name="R1" value="d" data="1"/>
<label for=""> d) Respuesta </label>
</p>
</fieldset>
<fieldset>
<p class="question">2. Pregunta</p>
<p>
<input type="radio" name="R2" value="a" data="2"/>
<label for=""> a) Respuesta correcta </label>
</p>
<p>
<input type="radio" name="R2" value="b" data="2"/>
<label for=""> b) Respuesta </label>
</p>
<p>
<input type="radio" name="R2" value="c" data="2"/>
<label for=""> c) Respuesta </label>
</p>
<p>
<input type="radio" name="R2" value="d" data="2"/>
<label for=""> d) Respuesta </label>
</p>
</fieldset>
<fieldset>
<p class="question">3. Pregunta</p>
<p>
<input type="radio" name="R3" value="a" data="3"/>
<label for="">a) Respuesta</label>
</p>
<p>
<input type="radio" name="R3" value="b" data="3"/>
<label for="">b) Respuesta</label>
</p>
<p>
<input type="radio" name="R3" value="c" data="3"/>
<label for="">c) Respuesta</label>
</p>
<p>
<input type="radio" name="R3" value="d" data="3"/>
<label for="">d) Respuesta correcta</label>
</p>
</fieldset>
<fieldset>
<p class="question">4. Pregunta</p>
<p>
<input type="radio" name="R4" value="a" data="4"/>
<label for="">a) Respuesta </label>
</p>
<p>
<input type="radio" name="R4" value="b" data="4"/>
<label for="">b) Respuesta correcta </label>
</p>
<p>
<input type="radio" name="R4" value="c" data="4"/>
<label for="">c) Respuesta </label>
</p>
<p>
<input type="radio" name="R4" value="d" data="4"/>
<label for="">d) Respuesta</label>
</p>
</fieldset>
<fieldset>
<p class="question">5. Pregunta</p>
<p>
<input type="radio" name="R5" value="a" data="5"/>
<label for="">a) Respuesta correcta</label>
</p>
<p>
<input type="radio" name="R5" value="b" data="5"/>
<label for="">b) Respuesta</label>
</p>
<p>
<input type="radio" name="R5" value="c" data="5"/>
<label for="">c) Respuesta</label>
</p>
<p>
<input type="radio" name="R5" value="d" data="5"/>
<label for="">d) Respuesta</label>
</p>
</fieldset>
<fieldset>
Boton resultado
<input type="button" id="show_results" name="RESULTADOS" value="RESULTADOS" />
</fieldset>
</form>
<p id="resultados"></p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment