Creating a trivia in Angular.js
For e.g.,
var mdata = {
"qa" :
[
{
"question" : "The compare() method is declared in",
"options" : [
"Comparable",
"Comparator",
"Compare",
"Compares"
],
"answer" : "Compares"
},
{
"question" : "Which of the following methods returns List from an array?",
"options" : [
"Arrays.asList(Object[] array)",
"Arrays.list(Object[] array)",
"Arrays.toList(Object[] array)",
"Arrays.createList(Object[] array)"
],
"answer" : "Arrays.createList(Object[] array)"
},
{
"question" : "Which of the following classes is synchronized?",
"options" : [
"Vector",
"ArrayList",
"HashMap",
"LinkedList"
],
"answer" : "LinkedList"
},
{
"question" : "Which of the following methods returns an enumerator over the elements of a collection?",
"options" : [
"elements()",
"enumerator()",
"enumerate()",
"getElements()"
],
"answer" : "getElements()"
}
]
}
After creating the data in the above JSON format, we can uswe this as a model we can define a controller which will store the above data in the $scope object and bind all the answers data to model using ng-model directive
The angularjs file is as follows:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="w.js"></script>
<script src="jquery.js"></script>
<script src="angular.js"></script>
<link href="bootstrap.min.css" rel="stylesheet" />
<style>
.custom-label{
color:white;
background-color:#333
}
select.form-control{
width:50%;
margin-bottom:35px;
margin-top:15px;
margin-left:5px;
}
label.form-control{height:auto;font-weight:normal}
div.form-group{
padding:0;
padding-bottom:1px;
background:#eee;
border-radius:2px;
width:60%
}
form,form>div.form-group,form>div.form{
display:inline
}
.right{font-weight:600;text-align:center;width:400px;height:40px;min-height:40px;backdrop-filter:brightness(0.5);position:relative;display:block;left:250px;}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.data = mdata
});
function validate() {
var flag=false;
let correct = 0, incorrect = 0;
var selects = document.getElementsByTagName("select");
var labels = document.getElementsByTagName("label");
var spans = document.getElementsByTagName("span");
for(var i=0;i<selects.length;i++){
if(selects[i].options[selects[i].selectedIndex].value==""){
flag=true;
labels[i].style.color="red";
labels[i].style.backgroundColor="yellow";
spans[i].style.display="inline";
}
else{
labels[i].style.color="white";
labels[i].style.backgroundColor="#333";
spans[i].style.display="none";
}
}
if(!flag){
var s = mdata.qa;
console.log(s);
for(var i=0;i<s.length;i++){
if("string:"+s[i].answer==selects[i].options[selects[i].selectedIndex].value){
correct++;
}
else {
incorrect++;
}
}
}
$(".right").html("<blockquote>Your score is " + correct + " out of 4</blockquote>");
$(".right").show();
correct=0;incorrect=0;
}
</script>
<div class="right text-center" style="display:none"></div>
<div class="container">
<h1 class="text-left">Java Trivia</h1>
<form name="myForm col-xs-3" novalidate>
<div class="form" ng-repeat="x in data.qa">
<div class="form-group">
<label class="form-control custom-label">{{ ($index+1) + ". " + x.question}}</label>
<select class="form-control" name="{{'option_id'+$index}}" required ng-model="option_id" ng-options="y for y in x.options">
<option value="">Select option</option>
</select>
<span class="text-danger text-center" style="display:none;font-weight:bold"> Select an option from the dropdown</span>
</div>
</div>
<div class="grid">
<button type="submit" class="btn btn-default col-xs-3" style="margin-right:20px;margin-left:20px" onclick="validate()">Submit</button>
<button type="reset" class="btn btn-default col-xs-3" onclick="document.forms[0].reset()">Clear Values</button>
</div>
</form>
</div>
</body>
</html>
Sample output
Comments
Post a Comment