vcgit-forge/TurtleFactsQuiz
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/TurtleFactsQuiz.git synced 2026-02-10 03:33:01 -05:00
Code Issues Packages Projects Releases Wiki Activity

added logic to get quiz questions and answers

Browse Source
This commit is contained in:
Raghu-Ch
2017-02-01 22:36:47 -08:00
parent 8013e88e1b
commit 63a4cac313
3 changed files with 56 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
css/style.css
View File

@@ -13,3 +13,15 @@
.answer:hover{
cursor: pointer;
}
.image-answer{
cursor: pointer;
height: 350px;
width: 100%;
overflow: hidden;
border-radius: 10px;
margin-bottom: 20px;
}
.image-answer img{
width: 100%;
height: auto;
}

23
index.html
View File

@@ -71,7 +71,7 @@
<div class="col-md-6">
<p><strong>locations:</strong>{{list.activeTurtle.locations}}</p>
<p><strong>Size:</strong>{{list.activeTurtle.size}}</p>
<p><strong>Average: Lifespan</strong>{{list.activeTurtle.lifespan}}</p>
<p><strong>Average Lifespan:</strong>{{list.activeTurtle.lifespan}}</p>
<p><strong>Dite:</strong>{{list.activeTurtle.dite}}</p>
</div>
<div class="col-xs-12 top-buffer">
@@ -93,7 +93,7 @@
<div class="row">
<div class="col-xs-8">
<h2><progress:</h2>
<h3>progress:</h3>
<div class="btn-toolbar">
<button class="btn"
ng-repeat = "question in quiz.dataServices.quizQuestions"
@@ -119,7 +119,7 @@
<p>Unanswered</p>
</div>
</div>
</div>
</div> <!-- legend ends -->
</div> <!-- progress section -->
<div class="row">
@@ -130,19 +130,30 @@
<h4>{{quiz.activeQuestion+1 + ". " + quiz.dataServices.quizQuestions[quiz.activeQuestion].text}}</h4>
</div>
</div>
<div class="row">
<div class="row"
ng-if = "quiz.dataServices.quizQuestions[quiz.activeQuestion].type === 'text'" >
<div class="col-sm-6" ng-repeat = "answer in quiz.dataServices.quizQuestions[quiz.activeQuestion].possibilities">
<h4 class ="answer">
{{answer.answer}}
</h4>
</div>
</div>
<div class="row"
ng-if = "quiz.dataServices.quizQuestions[quiz.activeQuestion].type === 'image'">
<div class="col-sm-6" ng-repeat = "answer in quiz.dataServices.quizQuestions[quiz.activeQuestion].possibilities">
<div class="image-answer">
<img ng-src="{{answer.answer}}">
</div>
</div>
</div>
<!-- ng-click will call the questionAnswered method on the controller -->
<button class = "btn btn-warning" ng-click = "quiz.questionAnswered()">Continue</button>
</div>
</div>
</div>
</div>
</div> <!-- quizCtrl ends -->
</div> <!-- container ends -->
<!-- third party scripts -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

28
js/controllers/quiz.js
View File

@@ -14,9 +14,35 @@
vm.dataServices = DataServices;
vm.questionAnswered = questionAnswered;
vm.activeQuestion = 0;
vm.setActiveQuestion = setActiveQuestion;
var numQuestionsAnswered = 0;
function setActiveQuestion () {
var breakOut = false;
var quizLength = DataServices.quizQuestions.length - 1;
while (!breakOut) {
vm.activeQuestion = vm.activeQuestion < quizLength?++vm.activeQuestion:0;
if (DataServices.quizQuestions[activeQuestion].selected === null)
breakOut = true;
}
}
function questionAnswered () {
var quizLength = DataServices.quizQuestions.length;
if (DataServices.quizQuestions[vm.activeQuestion].selected !== null){
numQuestionsAnswered++;
if (numQuestionsAnswered >= quizLength) {
// Finilise the quiz
}
}
vm.setActiveQuestion();
}
}