AngularJs is young powerful and efficient, It is a very good framework for javaScript design and a flexible client side framework it let you write less code and do more things. Read 5 Minutes Head-start on How to use AngularJs for web Design
to know more about AngularJs, You can also read
Real Time live data Graph Plotting Application with AngularJs and PHP (Google Analytics, Adsense Style) to see how you can use this powerful MVC library to create a real time graph for your websites and other web based applications. The point off this tutorial is to design a simple user interface assessment page.
Download Script
Live Demo
This will allow users to do their computer base tests and exams on your web application. We are less concerned about the user interface design (CSS) this time around what we are focusing on is the powerful small lines of Angular code that are responsible for the superb actions that are done on the UI structure(HTML).
The interface will have Next and Previous button so that users can navigate from one question to another but another incredible feature is that we are going to be calculating the remaining time , Time spent per question and we are also going to use a small line of code in our timer to recommend the time user should be spending on answering each test question.
For the demo we are using a 3 minute test with five questions as practice you can add more questions to see how it will work out. Here is the angularJs code we use to do the magic , If you want to see all the codes, Download it from the link above.
(function(w,d,_undefined) {
"use strict";
var icon = angular.module("icon", []).config(function($interpolateProvider){
$interpolateProvider.startSymbol('[[').endSymbol(']]');
}).controller('test', ['$scope','$interval','$http',
function($scope, $interval,$http){
console.log("Test controller sucessfully loaded.");
$scope.res = [ {
id: 17,
mark: 20,
body:"How many Mangoes?",
correct: false ,
spent:0,
selected:null,
image: null,
formular:null,
options:[{id:1,body:"2 Mangoes"},{id:9,body:"8 Mangoes"},{id:7,body:"23 Mangoes"},{id:2,body:"15 Manoes"}]
},{ id: 23,
mark: 3,
spent:0,
body:"Which of this programming languages will return null for an undefined variable?",
correct: false ,
selected:null,
image: null,
formular:null,
options:[{id:1,body:" JAVA"},{id:5,body:" C++ "},{id:7,body:" C "},{id:8,body:" Assembly"}]
},
{ id: 28,
mark: 1,
spent:0,
body:"The coolest Javascript MVC framework will be ?",
correct: false ,
selected:null,
image: null,
formular:null,
options:[{id:44,body:" ReactJS"},{id:51,body:" AngularJS"},{id:37,body:" jQuery "},{id:89,body:" Vanilla"}]
}, {
id: 288,
mark: 2,
spent:0,
body:"How many egg make a dozen? ?",
correct: null ,
selected:null,
image: null,
formular:null,
options:[{id:62,body:" 3 egg"},{id:71,body:" 6 egg"},{id:877,body:" 26 egg"},{id:754,body:" 12 egg"}]
},
{ id:655,
body:"What is the name of the device that converts computer output into a form that can be transmitted over a telephone line?",
correct: null ,
spent:0,
selected:null,
image: null,
formular:null,
options:[{id:772,body:" Concentrator"},{id:741,body:" Modem"},{id:8767,body:" Teleport"},{id:7514,body:" Multiplexer"}]
}
];
var tst = {title:"First assesment test",duration:"00:02:00"};
$scope.question = null;
$scope.pos=0;
$scope.changeQuestion = function(pos){ var l= ($scope.pos+pos); if(l>-1 && l<$scope.res.length){$scope.pos+=pos; $scope.serve($scope.pos);} }
$scope.serve = function(pos){$scope.question = $scope.res[pos]; $scope.pos=pos;}
$scope.selected = function(option){console.log(option);}
$scope.timer = function(){
var d1 = new Date(),d2 = new Date(d1);
var time = tst.duration.match(/(\d+)(?::(\d\d))?\s*(p?)/);
d2.setHours( d1.getHours()+(parseInt(time[1]) + (time[3] ? 12 : 0)) );
d2.setMinutes( d1.getMinutes()+(parseInt(time[2]) || 0) );
var end = d2.getTime();
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour *24;
var timer;
function showRemaining()
{
var now = new Date();
var distance = end - now;
tst.duration = distance;
var countdown = document.getElementById('timer');
var spent = document.getElementById('spent');
var recd = document.getElementById('rec');
if (distance < 600000 && distance>300000){countdown.style.color = "#F90";}else{countdown.style.color = "#060";}
if (distance < 300000){
countdown.style.color = "#F00";
}
if (distance < 0 ) {
clearInterval( timer );
countdown.innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor( (distance % _day ) / _hour );
var minutes = Math.floor( (distance % _hour) / _minute );
var seconds = Math.floor( (distance % _minute) / _second );
var rec = Math.floor(distance/_second);
countdown.innerHTML = '';
tst.duration = hours+":"+minutes+":"+seconds;
countdown.innerHTML = "Time Left: ";
countdown.innerHTML += (hours>0)? hours+ ' Hr(s); ':'';
countdown.innerHTML += minutes+ ' Min; ';
countdown.innerHTML += seconds+' Sec;';
$scope.question.spent++;
spent.style.color = "#060";
var fr = Math.floor(rec/($scope.res.length+2));
var ts = Math.floor(fr*document.getElementsByClassName("answered").length);
var r = Math.floor(fr+ts);
if ($scope.question.spent > (r/2) && $scope.question.spent<r){spent.style.color = "#F90";}
spent.innerHTML = $scope.question.spent;
if($scope.question.spent > r){spent.style.color = "#FF3333";recd.style.color = "#FF3333";}
recd.innerHTML =" It reccomended to spend "+r+" seconds per question.";
}
timer = setInterval(showRemaining, 1000);
}
$scope.getPageClass = function(p) {
var e='',a='';
if(p.selected){e="answered"}
if($scope.question.id>p.id&&!p.selected){e="unanswered"}
if($scope.question.id==p.id){a="inactive"}
if($scope.question.id!=p.id){a="active"}
return a+' '+e;
}
$scope.serve($scope.pos);
$scope.timer();
}]);
}(window,document));
"use strict";
var icon = angular.module("icon", []).config(function($interpolateProvider){
$interpolateProvider.startSymbol('[[').endSymbol(']]');
}).controller('test', ['$scope','$interval','$http',
function($scope, $interval,$http){
console.log("Test controller sucessfully loaded.");
$scope.res = [ {
id: 17,
mark: 20,
body:"How many Mangoes?",
correct: false ,
spent:0,
selected:null,
image: null,
formular:null,
options:[{id:1,body:"2 Mangoes"},{id:9,body:"8 Mangoes"},{id:7,body:"23 Mangoes"},{id:2,body:"15 Manoes"}]
},{ id: 23,
mark: 3,
spent:0,
body:"Which of this programming languages will return null for an undefined variable?",
correct: false ,
selected:null,
image: null,
formular:null,
options:[{id:1,body:" JAVA"},{id:5,body:" C++ "},{id:7,body:" C "},{id:8,body:" Assembly"}]
},
{ id: 28,
mark: 1,
spent:0,
body:"The coolest Javascript MVC framework will be ?",
correct: false ,
selected:null,
image: null,
formular:null,
options:[{id:44,body:" ReactJS"},{id:51,body:" AngularJS"},{id:37,body:" jQuery "},{id:89,body:" Vanilla"}]
}, {
id: 288,
mark: 2,
spent:0,
body:"How many egg make a dozen? ?",
correct: null ,
selected:null,
image: null,
formular:null,
options:[{id:62,body:" 3 egg"},{id:71,body:" 6 egg"},{id:877,body:" 26 egg"},{id:754,body:" 12 egg"}]
},
{ id:655,
body:"What is the name of the device that converts computer output into a form that can be transmitted over a telephone line?",
correct: null ,
spent:0,
selected:null,
image: null,
formular:null,
options:[{id:772,body:" Concentrator"},{id:741,body:" Modem"},{id:8767,body:" Teleport"},{id:7514,body:" Multiplexer"}]
}
];
var tst = {title:"First assesment test",duration:"00:02:00"};
$scope.question = null;
$scope.pos=0;
$scope.changeQuestion = function(pos){ var l= ($scope.pos+pos); if(l>-1 && l<$scope.res.length){$scope.pos+=pos; $scope.serve($scope.pos);} }
$scope.serve = function(pos){$scope.question = $scope.res[pos]; $scope.pos=pos;}
$scope.selected = function(option){console.log(option);}
$scope.timer = function(){
var d1 = new Date(),d2 = new Date(d1);
var time = tst.duration.match(/(\d+)(?::(\d\d))?\s*(p?)/);
d2.setHours( d1.getHours()+(parseInt(time[1]) + (time[3] ? 12 : 0)) );
d2.setMinutes( d1.getMinutes()+(parseInt(time[2]) || 0) );
var end = d2.getTime();
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour *24;
var timer;
function showRemaining()
{
var now = new Date();
var distance = end - now;
tst.duration = distance;
var countdown = document.getElementById('timer');
var spent = document.getElementById('spent');
var recd = document.getElementById('rec');
if (distance < 600000 && distance>300000){countdown.style.color = "#F90";}else{countdown.style.color = "#060";}
if (distance < 300000){
countdown.style.color = "#F00";
}
if (distance < 0 ) {
clearInterval( timer );
countdown.innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor( (distance % _day ) / _hour );
var minutes = Math.floor( (distance % _hour) / _minute );
var seconds = Math.floor( (distance % _minute) / _second );
var rec = Math.floor(distance/_second);
countdown.innerHTML = '';
tst.duration = hours+":"+minutes+":"+seconds;
countdown.innerHTML = "Time Left: ";
countdown.innerHTML += (hours>0)? hours+ ' Hr(s); ':'';
countdown.innerHTML += minutes+ ' Min; ';
countdown.innerHTML += seconds+' Sec;';
$scope.question.spent++;
spent.style.color = "#060";
var fr = Math.floor(rec/($scope.res.length+2));
var ts = Math.floor(fr*document.getElementsByClassName("answered").length);
var r = Math.floor(fr+ts);
if ($scope.question.spent > (r/2) && $scope.question.spent<r){spent.style.color = "#F90";}
spent.innerHTML = $scope.question.spent;
if($scope.question.spent > r){spent.style.color = "#FF3333";recd.style.color = "#FF3333";}
recd.innerHTML =" It reccomended to spend "+r+" seconds per question.";
}
timer = setInterval(showRemaining, 1000);
}
$scope.getPageClass = function(p) {
var e='',a='';
if(p.selected){e="answered"}
if($scope.question.id>p.id&&!p.selected){e="unanswered"}
if($scope.question.id==p.id){a="inactive"}
if($scope.question.id!=p.id){a="active"}
return a+' '+e;
}
$scope.serve($scope.pos);
$scope.timer();
}]);
}(window,document));
Have fun!
Thanks!
Your feedback helps us improve tutorials.
No comments:
Post a Comment