Taehun Ahn Taehun Ahn - 4 months ago 10
Javascript Question

How to check whether submitted radio button contains the correct answer

I am trying to make a simple quiz.
So far, I have built the code that calls array of possible questions randomly. Now I want to let user submit the checked radio box and find out whether the submitted option is correct or not.

I guess to check this I need to compare the submitted option with the "Correct" answer inside the data set. In the data set(dictionary), I have "Category", "Incorrect", "Correct", and etc. So only when submitted option is equal to "Correct" sentence, the user will get the message saying 'correct answer'.



(function(angular) {

'use strict';

angular.module('demo', [])
.controller('repeatController', function($scope) {
$scope.questions = {
"0": {
"Category": "Commas",
"Correct": "Shirley Chisholm was the first major-party candidate to run for President in a major party. She ran as a Democrat.ANSWER",
"Given_sen": "\"Shirley Chisholm was the first major party candidate to run for President in a major party, she ran as a Democrat.\"",
"Incorrect": [
"\"Shirley Chisholm, the first major-party candidate to run for President in a major party, she ran as a Democrat.\"",
"Shirley Chisholm was the first major-party candidate to run for President in a major party: she ran as a Democrat.",
"Shirley Chisholm was the first major-party candidate to run for President in a major party (she ran as a Democrat)."
],
"Question": "Fix the comma splice.",
"Rule": "comma splice\n"
},


"1": {
"Category": "Commas",
"Correct": "Hattie McDaniel was the first African-American to win an Oscar. She won for her performance in Gone with the Wind.",
"Given_sen": "\"Hattie McDaniel was the first African-American to win an Oscar, she won for her performance in Gone with the Wind.\"",
"Incorrect": [
"Hattie McDaniel was the first African-American to win an Oscar: she won for her performance in Gone with the Wind.",
"\"Hattie McDaniel, the first African-American to win an Oscar, she won for her performance in Gone with the Wind.\"",
"\"Hattie McDaniel was the first African-American to win an Oscar, for her performance in Gone with the Wind.\""
],
"Question": "Fix the comma splice.",
"Rule": "comma splice\n"
}
};

function sort(array) {
return array.sort(function() {
return .5 - Math.random();
});
}

<!-- add correct answer to incorrect answer array and srot it randomly.-->
function random() {
for (var key in $scope.questions) {
$scope.questions[key].Incorrect.push($scope.questions[key].Correct);
$scope.questions[key].Incorrect = sort($scope.questions[key].Incorrect);
}
}

random();
});
})(angular);

function myFunction() {
var x = document.createElement("BUTTON");
var t = document.createTextNode("Click me");
x.appendChild(t);
document.body.appendChild(x);
}

<!DOCTYPE html>
<html ng-app="demo">

<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="repeatController">

<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">


<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
</button>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">

<ul class="nav navbar-nav navbar-right">
<li><a href="About_us.html"><span class="glyphicon glyphicon-check"></span> ABOUT US</a></li>
<li><a href="Contact_Info.html"><span class="glyphicon glyphicon-envelope"></span>CONTACT INFO</a></li>
</ul>

</div>
</div>
</div>
</nav>

<form ng-repeat="question in questions">
<div class="col-md-12">
<div class="well"><b> QUESTION: {{question.Question}}</b>
<br> Category: {{question.Category}} </div>
<div class="radio" ng-repeat="incorrect_answer in question.Incorrect">
<label>
<input type="radio" name="radio{{$parent.$index}}" value="{{incorrect_answer}}"> {{incorrect_answer}}
</label>
</div>
<!--
<div class="form-group">
<label class="radio-inline">
<input type="radio"> {{question.Correct}}
</label>
</div>
-->
<div class="form-group" onsubmit="TestFunction()">
<input class="btn btn-primary" type="submit" value="Submit">
</div>
</div>
</form>
</body>




Answer

You can check the value attribute with myElement.getAttribute('value'). So:

var correctAnswer = 'apples';

var myRadio = document.getElementById('myRadio');

var isCorrect = myRadio.getAttribute('value') === correctAnswer;

console.log('is correct? ' + isCorrect);

You could also grab all of the radio buttons with the same name attribute value and then loop over them, looking at their checked property, and (if checked) break the loop and return that radio's value.

Comments