Skip to content

Instantly share code, notes, and snippets.

/index.html

Created December 14, 2016 16:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/99c8726c92bf346b8a866ab797674716 to your computer and use it in GitHub Desktop.
Save anonymous/99c8726c92bf346b8a866ab797674716 to your computer and use it in GitHub Desktop.
Download ZIP
English Test [add your bin descSription]Simple English Test // source https://jsbin.com/bedamoyiqa
Raw
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta name="description" content="[add your bin descSription]Simple English Test">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>English Test</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<style id="jsbin-css">
body {
background-color: #eee;
}
.container {
margin: 50px auto;
max-width: 600px;
}
.question {
padding: 10px 20px;
margin: 20px 0;
color: #666;
background-color: #fff;
border: 4px solid transparent;
border-radius: 3px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.12);
transition: all 200ms ease;
}
.question:hover {
color: inherit;
}
.question__options {
padding: 0;
list-style: none;
}
.question__item {
padding: 5px;
}
.question--voted {
color: #fff !important;
background: #03C03C;
box-shadow: 0 5px 5px rgba(3, 192, 60, 0.4);
}
.question--empty {
border-color: #FF6961;
}
</style>
</head>
<body ng-controller="appController">
<div class="container">
<h1 class="text-center">{{ ::title | uppercase }}</h1>
<div class="question text-center" ng-if="result">
<h4 >
<p>
<h2>{{ result.level }}</h2>
<small><em class="text-center">That´s your level.</em></small>
</p>
<p>{{ result.hits || 0 }} correct answers out of {{ questions.length }}</p>
</h4>
</div>
<question-comp
ng-if="!result"
id="{{$index + 1}}"
question="question"
ng-repeat="question in questions track by $index">
</question-comp>
<div ng-if="error" class="alert alert-danger" role="alert">
You must answer all questions before submit the test.
</div>
<button
class="btn btn-success btn-lg btn-block"
ng-click="checkResults()"
ng-if="!result">
Test Result
</button>
<button
class="btn btn-success btn-lg btn-block"
ng-click="reset()"
ng-if="result">
Reset
</button>
</div>
<script id="jsbin-javascript">
"use strict";
var app = angular.module("app", []);
app.factory("dataService", function ($http) {
return {
get: function get() {
return $http.get("https://gist.githubusercontent.com/rafaell-lycan/684aa10bdeb32dd12aa1de479a435fec/raw/e843c9e0847eb7b069c67c6cb774cc3f94a6262c/questions.json");
}
};
});
app.service("testService", function ($q) {
function getProficiencyLevel(hits) {
if (hits >= 90) {
return "C2";
}
if (hits >= 75) {
return "C1";
}
if (hits >= 60) {
return "B2";
}
if (hits >= 40) {
return "B1";
}
if (hits >= 20) {
return "A2";
}
if (hits >= 10) {
return "A1+";
}
return "A1";
}
function getTestResults(test) {
var deferred = $q.defer();
var result = proccessTest(test);
if (!result) deferred.reject();
deferred.resolve(result);
return deferred.promise;
}
function proccessTest(test) {
var empty = false;
var result = {
hits: 0,
percentage: 0,
level: null
};
test.forEach(function (question) {
if (question.vote == null) {
question.empty = true;
empty = true;
}
if (question.correct === question.vote) {
result.hits++;
}
});
if (empty) {
return false;
}
result.percentage = 100 / test.length * result.hits;
result.level = getProficiencyLevel(result.percentage);
return result;
}
return {
getTestResults: getTestResults,
getProficiencyLevel: getProficiencyLevel,
proccessTest: proccessTest
};
});
app.controller("appController", function ($scope, dataService, testService) {
$scope.title = "English Test";
$scope.questions = null;
$scope.checkResults = checkResults;
$scope.reset = reset;
init();
function checkResults() {
$scope.error = false;
testService.getTestResults($scope.questions).then(function (result) {
return $scope.result = result;
})["catch"](function (e) {
return $scope.error = true;
});
}
function reset() {
$scope.result = false;
init();
}
function init() {
dataService.get().then(function (response) {
$scope.questions = response.data;
});
}
});
app.directive("questionComp", function () {
var questionComp = "\n <div class=\"question\" ng-class=\"{'question--voted': question.vote != null, 'question--empty': question.empty }\">\n <h4>{{id}}) {{ question.question.trim() || \"Choose the right answer:\" }}</h4>\n <ul class=\"question__options\">\n <li class=\"question__item radio\" ng-repeat=\"opt in question.options track by $index\">\n <label>\n <input type=\"radio\" name=\"{{code}}\" id=\"{{code}}{{$index}}\" ng-value=\"{{$index}}\" ng-click=\"vote($index)\"> \n {{ ::opt }}\n </label>\n </li>\n </ul>\n </div>\n";
return {
restrict: "E",
scope: {
question: "=",
id: "@"
},
link: link,
template: questionComp
};
function link(scope) {
scope.code = Date.now();
scope.vote = function (position) {
scope.question.vote = position;
scope.question.empty = false;
};
}
});
</script>
<script id="jsbin-source-css" type="text/css">body {
background-color: #eee;
}
.container {
margin: 50px auto;
max-width: 600px;
}
.question {
padding: 10px 20px;
margin: 20px 0;
color: #666;
background-color: #fff;
border: 4px solid transparent;
border-radius: 3px;
box-shadow: 0 5px 5px rgba(black, 0.12);
transition: all 200ms ease;
&:hover {
color: inherit;
}
&__options {
padding: 0;
list-style: none;
}
&__item {
padding: 5px;
}
&--voted {
color: #fff !important;
background: #03C03C;
box-shadow: 0 5px 5px rgba(#03C03C, 0.4);
}
&--empty {
border-color: #FF6961;
}
}</script>
<script id="jsbin-source-javascript" type="text/javascript">const app = angular.module("app", []);
app.factory("dataService", ($http) => {
return {
get: () => {
return $http.get("https://gist.githubusercontent.com/rafaell-lycan/684aa10bdeb32dd12aa1de479a435fec/raw/e843c9e0847eb7b069c67c6cb774cc3f94a6262c/questions.json");
}
};
});
app.service("testService", ($q) => {
function getProficiencyLevel (hits){
if (hits >= 90) { return "C2";}
if (hits >= 75) { return "C1";}
if (hits >= 60) { return "B2";}
if (hits >= 40) { return "B1";}
if (hits >= 20) { return "A2";}
if (hits >= 10) { return "A1+";}
return "A1";
}
function getTestResults (test){
let deferred = $q.defer();
const result = proccessTest(test);
if (!result) deferred.reject();
deferred.resolve(result);
return deferred.promise;
}
function proccessTest (test){
let empty = false;
let result = {
hits: 0,
percentage: 0,
level: null
};
test.forEach(question => {
if(question.vote == null) {
question.empty = true;
empty = true;
}
if (question.correct === question.vote) { result.hits++; }
});
if(empty) { return false; }
result.percentage = (100 / test.length) * result.hits;
result.level = getProficiencyLevel(result.percentage);
return result;
}
return {
getTestResults : getTestResults,
getProficiencyLevel : getProficiencyLevel,
proccessTest : proccessTest
};
});
app.controller("appController", ($scope, dataService, testService) => {
$scope.title = "English Test";
$scope.questions = null;
$scope.checkResults = checkResults;
$scope.reset = reset;
init();
function checkResults (){
$scope.error = false;
testService.getTestResults($scope.questions)
.then(result => $scope.result = result)
.catch(e => $scope.error = true);
}
function reset () {
$scope.result = false;
init();
}
function init (){
dataService.get().then(response => {
$scope.questions = response.data;
});
}
});
app.directive("questionComp", () => {
const questionComp = `
<div class="question" ng-class="{'question--voted': question.vote != null, 'question--empty': question.empty }">
<h4>{{id}}) {{ question.question.trim() || "Choose the right answer:" }}</h4>
<ul class="question__options">
<li class="question__item radio" ng-repeat="opt in question.options track by $index">
<label>
<input type="radio" name="{{code}}" id="{{code}}{{$index}}" ng-value="{{$index}}" ng-click="vote($index)">
{{ ::opt }}
</label>
</li>
</ul>
</div>
`;
return {
restrict: "E",
scope: {
question: "=",
id: "@"
},
link: link,
template: questionComp
};
function link(scope) {
scope.code = Date.now();
scope.vote = function(position) {
scope.question.vote = position;
scope.question.empty = false;
}
}
});</script></body>
</html>
Raw
jsbin.bedamoyiqa.css
body {
background-color: #eee;
}
.container {
margin: 50px auto;
max-width: 600px;
}
.question {
padding: 10px 20px;
margin: 20px 0;
color: #666;
background-color: #fff;
border: 4px solid transparent;
border-radius: 3px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.12);
transition: all 200ms ease;
}
.question:hover {
color: inherit;
}
.question__options {
padding: 0;
list-style: none;
}
.question__item {
padding: 5px;
}
.question--voted {
color: #fff !important;
background: #03C03C;
box-shadow: 0 5px 5px rgba(3, 192, 60, 0.4);
}
.question--empty {
border-color: #FF6961;
}
Raw
jsbin.bedamoyiqa.js
"use strict";
var app = angular.module("app", []);
app.factory("dataService", function ($http) {
return {
get: function get() {
return $http.get("https://gist.githubusercontent.com/rafaell-lycan/684aa10bdeb32dd12aa1de479a435fec/raw/e843c9e0847eb7b069c67c6cb774cc3f94a6262c/questions.json");
}
};
});
app.service("testService", function ($q) {
function getProficiencyLevel(hits) {
if (hits >= 90) {
return "C2";
}
if (hits >= 75) {
return "C1";
}
if (hits >= 60) {
return "B2";
}
if (hits >= 40) {
return "B1";
}
if (hits >= 20) {
return "A2";
}
if (hits >= 10) {
return "A1+";
}
return "A1";
}
function getTestResults(test) {
var deferred = $q.defer();
var result = proccessTest(test);
if (!result) deferred.reject();
deferred.resolve(result);
return deferred.promise;
}
function proccessTest(test) {
var empty = false;
var result = {
hits: 0,
percentage: 0,
level: null
};
test.forEach(function (question) {
if (question.vote == null) {
question.empty = true;
empty = true;
}
if (question.correct === question.vote) {
result.hits++;
}
});
if (empty) {
return false;
}
result.percentage = 100 / test.length * result.hits;
result.level = getProficiencyLevel(result.percentage);
return result;
}
return {
getTestResults: getTestResults,
getProficiencyLevel: getProficiencyLevel,
proccessTest: proccessTest
};
});
app.controller("appController", function ($scope, dataService, testService) {
$scope.title = "English Test";
$scope.questions = null;
$scope.checkResults = checkResults;
$scope.reset = reset;
init();
function checkResults() {
$scope.error = false;
testService.getTestResults($scope.questions).then(function (result) {
return $scope.result = result;
})["catch"](function (e) {
return $scope.error = true;
});
}
function reset() {
$scope.result = false;
init();
}
function init() {
dataService.get().then(function (response) {
$scope.questions = response.data;
});
}
});
app.directive("questionComp", function () {
var questionComp = "\n <div class=\"question\" ng-class=\"{'question--voted': question.vote != null, 'question--empty': question.empty }\">\n <h4>{{id}}) {{ question.question.trim() || \"Choose the right answer:\" }}</h4>\n <ul class=\"question__options\">\n <li class=\"question__item radio\" ng-repeat=\"opt in question.options track by $index\">\n <label>\n <input type=\"radio\" name=\"{{code}}\" id=\"{{code}}{{$index}}\" ng-value=\"{{$index}}\" ng-click=\"vote($index)\"> \n {{ ::opt }}\n </label>\n </li>\n </ul>\n </div>\n";
return {
restrict: "E",
scope: {
question: "=",
id: "@"
},
link: link,
template: questionComp
};
function link(scope) {
scope.code = Date.now();
scope.vote = function (position) {
scope.question.vote = position;
scope.question.empty = false;
};
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment