Quiz demo link http://embed.plnkr.co/B10yZ4/preview
The AngularJs code-sample
var app =
angular.module('quizApp',
[]);
app.controller('quizCtrl', function($scope) {
$scope.checkResult = function(item) {
//check answers.
};
$scope.calRresult = function() {
//calculat result.
};
$scope.quizAnsw = [{ ans: 'Igor Minar', correct: 0 }, {
ans: 'Brad Green',
correct: 0 },
{ ans: 'Misko Hevery', correct: 1 }, {
ans: 'Steve Souders',
correct: 0 }];
});
The full example code(HTML + AngularJs)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script>
var app =
angular.module('quizApp',
[]);
app.controller('quizCtrl', function ($scope) {
$scope.checkResult = function (item) {
//check answers.
//if (item > 0) {
// alert("Correct Answer!");
//} else {
/// alert("Wrong Answer!");
//}
};
$scope.calRresult = function () {
//calculate result.
};
$scope.quizAnsw = [{ ans: 'Igor Minar', correct: 0 }, {
ans: 'Brad Green',
correct: 0 },
{ ans: 'Misko Hevery', correct: 1 }, {
ans: 'Steve Souders',
correct: 0 }];
});
</script>
</head>
<body ng-app="quizApp" ng-controller="quizCtrl">
<div>
<div ng-repeat="quiz in
quizAnsw">
<label ng-click="checkResult(quiz.correct)">
<input type="radio" name="answ" ng-value="$index" ng-model="quizSelectedAns" /> {{quiz.ans}}
</label>
</div>
<br>
<input type="button" ng-click="calRresult()" value="Quiz
Result"
class="fb9" />
</div>
</body>
</html>
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
