1
Ich bin sehr neu zu den Technologien und lernen Winkel js durch die Entwicklung einer Quiz-App mit angularJS. Ich möchte die Fragen von mischen Multiple-Choice-Fragen und füllen Sie die leeren Fragen. Ich habe Multiple-Choice-Fragen erstellt, aber ich kann die leeren Fragen nicht ausfüllen. Könnte jemand bitte ein paar Vorschläge machen, wie man die leeren Fragen ausfüllen kann.wie zu erstellen "Füllen Sie die leeren" Fragen mit angularJS
zum Beispiel: wie --- Sie ?, was --- Sie tun ?. diese Art von Fragen.
hier ist mein Code:
questions.html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="questionsController" ng-init="StartTimer()">
<div id="test_status" style="text-align:left">
<h3 ng-show='ques'>Question {{pos+1}} of {{questions.length}}</h3>
<h3 ng-hide='ques'>Test Completed </h3>
</div>
<ol style="list-style-type:none">
<li id="test" colspan="3">
<div ng-show="ques">
<h3>{{question}}</h3>
<input type='radio' name='choices' value='A'>{{chA}}
<br>
<input type='radio' name='choices' value='B'>{{chB}}
<br>
<input type='radio' name='choices' value='C'>{{chC}}
<br>
<br>
<button ng-click='checkAnswer()'>Next</button>
</div>
</li>
</ol>
<div ng-hide='ques'>
<div class="col-lg-5">
<div class="panel panel-danger">
<div class="panel-heading">Score Card</div>
<div class="panel-body">
<h3>You have got {{correct}} correct of {{questions.length}} questions</h3>
<h4>Exam Finished in Time :{{minuteleft}} Minutes {{sec}} Seconds</h4>
<div ng-controller="resultController">
<button ng-click='click()' class="btn btn-success">Continue</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="panel panel-primary">
<div class="panel-heading">Time Limit</div>
<div class="panel-body">
<h2>{{min}}:{{sec}}</h2>
</div>
</div>
</div>
<br>
</div>
</body>
und main.js
var myApp = angular.module('myApp',['ngRoute']);
myApp.controller('questionsController', function($scope,$interval,$filter,$http) {
$scope.pos = 0, $scope.correct = 0, $scope.ques = true;
$scope.questions = [
["Which of the following a is not a keyword in Java ?", "class", "interface", "extends", "C"],
["Which of the following is an interface ?", "Thread", "Date", "Calender", "A"],
["Which company released Java Version 8 ?", "Sun", "Oracle", "Adobe", "A"],
["What is the length of Java datatype int ?", "32 bit", "16 bit", "None", "C"],
["What is the default value of Java datatype boolean?", "true", "false", "0", "A"]
];
$scope.totalsecoriginal = $scope.totalsec = 60;
$scope.totalsec--;
$scope.min = parseInt($scope.totalsec/60, 10);
$scope.sec = $scope.totalsec - ($scope.min * 60);
$scope.date = new Date();
$scope.hhmmss = $filter('date')(new Date(), 'hh:mm:ss a');
$scope.currentTime = new Date();
$scope.currentTime.setSeconds($scope.currentTime.getSeconds() + 60);
function _(x) {
console.log(angular.element(document.getElementById(x)));
return angular.element(document.getElementById(x))[0];
}
$scope.interval = $interval(function() {
if ($scope.sec === 0) {
$scope.min--;
$scope.sec = 60;
}
$scope.sec--;
}, 1000);
$scope.$watch('sec', function() {
if ($scope.min === 0 && $scope.sec === 0) {
$interval.cancel($scope.interval);
window.alert('Time Up!!!');
$scope.pos = $scope.questions.length;
$scope.temp = true;
$scope.renderQuestion();
}
})
$scope.renderQuestion = function() {
if ($scope.pos >= $scope.questions.length) {
$scope.ques = false;
if (!$scope.temp) { $scope.temp = false;
$interval.cancel($scope.interval);
}
$scope.showscore = Math.round($scope.correct/$scope.questions.length * 100);
$scope.minuteleft = parseInt(($scope.totalsecoriginal - $scope.totalsec)/60, 10);
$scope.pos = 0;
return false;
}
$scope.question = $scope.questions[$scope.pos][0];
$scope.chA = $scope.questions[$scope.pos][1];
$scope.chB = $scope.questions[$scope.pos][2];
$scope.chC = $scope.questions[$scope.pos][3];
}
$scope.checkAnswer = function() {
$scope.choices = angular.element(document.getElementsByName('choices'));
$scope.choice = -1;
for (var i = 0; i < $scope.choices.length; i++) {
if ($scope.choices[i].checked) {
$scope.choice = $scope.choices[i].value;
$scope.choices[i].checked = false;
}
}
if ($scope.choice == $scope.questions[$scope.pos][4]) {
$scope.correct++;
}
$scope.pos++;
$scope.renderQuestion();
};
$scope.renderQuestion();
});
Vielen Dank im Voraus.