110swag / flashy-frontend

Compare View

switch
from
...
to
 
Commits (2)

Diff

Showing 2 changed files Inline Diff

scripts/StudyController.js View file @ 95fe801
angular.module('flashy.StudyController', ['ui.router']). 1 1 angular.module('flashy.StudyController', ['ui.router']).
2 2
controller('StudyController', function($scope, $stateParams, $state, $http, UserService, Flashcard) { 3 3 controller('StudyController', function($scope, $stateParams, $state, $http, UserService, Flashcard) {
4 4
$('.datepicker').pickadate({ 5 5 $('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month 6 6 selectMonths: true, // Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year 7 7 selectYears: 15 // Creates a dropdown of 15 years to control year
}); 8 8 });
9 9
$('select').material_select(); 10 10 $('select').material_select();
11 11
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 12 12 // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal({ 13 13 $('.modal-trigger').leanModal({
dismissible: true, // Modal can be dismissed by clicking outside of the modal 14 14 dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: .5, // Opacity of modal background 15 15 opacity: .5, // Opacity of modal background
in_duration: 300, // Transition in duration 16 16 in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration 17 17 out_duration: 200, // Transition out duration
ready: function() { 18 18 ready: function() {
alert('Ready'); 19 19 alert('Ready');
}, // Callback for Modal open 20 20 }, // Callback for Modal open
complete: function() { 21 21 complete: function() {
alert('Closed'); 22 22 alert('Closed');
} // Callback for Modal close 23 23 } // Callback for Modal close
} 24 24 }
); 25 25 );
26 26
// Open by default 27 27 // Open by default
$('#content-x').slideDown(250).addClass('open'); 28 28 $('#content-x').slideDown(250).addClass('open');
$('#content-dateselection').slideDown(250).addClass('open'); 29 29 $('#content-dateselection').slideDown(250).addClass('open');
30 30
// JQuery range slider initialization 31 31 // JQuery range slider initialization
/* 32 32 /*
$(function() { 33 33 $(function() {
$( "#slider-range" ).slider({ 34 34 $( "#slider-range" ).slider({
range: true, 35 35 range: true,
min: 0, 36 36 min: 0,
max: 500, 37 37 max: 500,
values: [ 75, 300 ], 38 38 values: [ 75, 300 ],
slide: function( event, ui ) { 39 39 slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); 40 40 $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
} 41 41 }
}); 42 42 });
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + 43 43 $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) ); 44 44 " - $" + $( "#slider-range" ).slider( "values", 1 ) );
}); 45 45 });
*/ 46 46 */
47 47
$('#start-date').val('2015-03-15'); 48 48 $('#start-date').val('2015-03-15');
$('#end-date').val('2015-06-12'); 49 49 $('#end-date').val('2015-06-12');
50 50
sectionId = $stateParams.sectionId; 51 51 sectionId = $stateParams.sectionId;
$scope.UserService = UserService; 52 52 $scope.UserService = UserService;
53 53
$scope.quiz = null; // The received FlashcardQuiz object. 54 54 $scope.quiz = null; // The received FlashcardQuiz object.
$scope.cardCount = 0; // Keeps track of cards in a study session. 55 55 $scope.cardCount = 0; // Keeps track of cards in a study session.
$scope.hasBlanks = true; // Whether current $scope.quiz has blanks. 56 56 $scope.hasBlanks = true; // Whether current $scope.quiz has blanks.
$scope.inResultsModal = false; // Whether user is @ results modal. 57 57 $scope.inResultsModal = false; // Whether user is @ results modal.
$scope.inQuestionsModal = false; // Whether user is @ results modal. 58 58 $scope.inQuestionsModal = false; // Whether user is @ results modal.
59 59
console.log('user sections', $scope.UserService.getUserData().sections); 60 60 console.log('user sections', $scope.UserService.getUserData().sections);
61 61
/* Sets current study class to the one passed in (y) */ 62 62 /* Sets current study class to the one passed in (y) */
$scope.toggleSectionToStudy = function(id) { 63 63 $scope.toggleSectionToStudy = function(id) {
console.log('toggle sect', id); 64 64 console.log('toggle sect', id);
if ($scope.sectionToStudy == id) $scope.sectionToStudy = null; 65 65 if ($scope.sectionToStudy == id) $scope.sectionToStudy = null;
else $scope.sectionToStudy = id; 66 66 else $scope.sectionToStudy = id;
}; 67 67 };
68 68
/* Opens or closes content collapsible */ 69 69 /* Opens or closes content collapsible */
$scope.toggleContent = function(event, index) { 70 70 $scope.toggleContent = function(event, index) {
if ($('#content-x').hasClass('open')) { // let's close it 71 71 if ($('#content-x').hasClass('open')) { // let's close it
// Note: 250 is duration (ms) of animation 72 72 // Note: 250 is duration (ms) of animation
$('#content-x').slideUp(250).removeClass('open'); 73 73 $('#content-x').slideUp(250).removeClass('open');
} else { // let's open it 74 74 } else { // let's open it
$('#content-x').slideDown(250).addClass('open'); 75 75 $('#content-x').slideDown(250).addClass('open');
} 76 76 }
}; 77 77 };
78 78
$scope.quizModalFetch = function() { 79 79 $scope.quizModalFetch = function() {
$('#quizup--question').openModal(); 80 80 $('#quizup--question').openModal();
$('#answer').focus(); 81 81 $('#answer').focus();
}; 82 82 };
$scope.quizModalClose = function() { 83 83 $scope.quizModalClose = function() {
$('#quizup--question').closeModal(); 84 84 $('#quizup--question').closeModal();
}; 85 85 };
86 86
$scope.resultModalFetch = function() { 87 87 $scope.resultModalFetch = function() {
$('#quizup--result').openModal(); 88 88 $('#quizup--result').openModal();
}; 89 89 };
$scope.resultModalClose = function() { 90 90 $scope.resultModalClose = function() {
$('#quizup--result').closeModal(); 91 91 $('#quizup--result').closeModal();
}; 92 92 };
93 93
/* Fetches the quiz to display to user 94 94 /* Fetches the quiz to display to user
* // TODO Hella work to be done, especially on dates regards!!! 95 95 * // TODO Hella work to be done, especially on dates regards!!!
// FIXME e.g. date checks, eTC ETC the date range is supposed to be 96 96 // FIXME e.g. date checks, eTC ETC the date range is supposed to be
* 3/31 to 6/12/2015 97 97 * 3/31 to 6/12/2015
*/ 98 98 */
$scope.quizState = 'fetching'; 99 99 $scope.quizState = 'fetching';
$scope.fetchQuiz = function() { 100 100 $scope.fetchQuiz = function() {
$scope.quizState = 'fetching'; 101 101 $scope.quizState = 'fetching';
console.log('fetching quiz...'); 102 102 console.log('fetching quiz...');
103 103
// Interpret chosen dates. 104 104 // Interpret chosen dates.
//console.log('startdate:', new Date($('#start-date').val()+'T00:00:00Z')); 105 105 //console.log('startdate:', new Date($('#start-date').val()+'T00:00:00Z'));
//console.log('enddate:', $('#end-date').val() + 'T00:00:00Z'); 106 106 //console.log('enddate:', $('#end-date').val() + 'T00:00:00Z');
107 107
//TODO: datetime range check YO!!! 108 108 //TODO: datetime range check YO!!!
109 109
110
110 111 var start = new Date($('#start-date').val());
var start = new Date($('#start-date').val()); 111 112 var end = new Date($('#end-date').val());
var end = new Date($('#end-date').val()); 112 113
113 114 console.log($('#start-date').val());
115 console.log($('#end-date').val());
116 //console.log($('#date-pick-start').val());
117 //console.log($('data pick is ' + date-pick);
console.log($('#start-date').val()); 114 118 // Time to get quiz...
console.log($('#end-date').val()); 115 119 /*
//console.log($('#date-pick-start').val()); 116 120 if ($('#start-date').val() == null || $('#end-date').val() == null) {
//console.log($('data pick is ' + date-pick); 117 121 studyRequest = {
// Time to get quiz... 118 122 'sections': section
/* 119 123 };
if ($('#start-date').val() == null || $('#end-date').val() == null) { 120 124 } else {
studyRequest = { 121 125 studyRequest = {
'sections': section 122 126 'sections': section,
}; 123 127 'material_date_begin': start,
} else { 124 128 'material_date_end': end
studyRequest = { 125 129 };
'sections': section, 126 130 }
'material_date_begin': start, 127 131 */
'material_date_end': end 128 132
}; 129 133 studyRequest = {};
} 130 134 if ($scope.sectionToStudy) studyRequest.sections = [$scope.sectionToStudy];
*/ 131 135 $scope.busy = true;
132 136 $http.post('/api/study/', studyRequest).
studyRequest = {}; 133 137 success(function(data) {
if ($scope.sectionToStudy) studyRequest.sections = [$scope.sectionToStudy]; 134 138 console.log('Fetched card:', data);
$scope.busy = true; 135 139 $scope.quiz = data;
$http.post('/api/study/', studyRequest). 136 140 $scope.busy = false;
success(function(data) { 137 141 // If the card has no blanks
console.log('Fetched card:', data); 138 142 if (data.mask.length == 0) {
$scope.quiz = data; 139 143 $scope.text0 = data.text;
$scope.busy = false; 140 144 $scope.text1 = '';
// If the card has no blanks 141 145 $scope.textblank = '';
if (data.mask.length == 0) { 142 146 $scope.hasBlanks = false;
$scope.text0 = data.text; 143 147 } else { // Blank exists! :-)
$scope.text1 = ''; 144 148 $scope.text0 = data.text.slice(0, data.mask[0]);
$scope.textblank = ''; 145 149 $scope.text1 = data.text.slice(data.mask[1]);
$scope.hasBlanks = false; 146 150 $scope.textblank = data.text.slice(data.mask[0], data.mask[1]);
} else { // Blank exists! :-) 147 151 $scope.hasBlanks = true;
$scope.text0 = data.text.slice(0, data.mask[0]); 148 152 }
$scope.text1 = data.text.slice(data.mask[1]); 149 153
$scope.textblank = data.text.slice(data.mask[0], data.mask[1]); 150 154 $scope.cardCount += 1;
$scope.hasBlanks = true; 151 155 $scope.answer = ''; // reset answer
} 152 156 $scope.inQuestionsModal = true;
153 157 $scope.quizModalFetch();
$scope.cardCount += 1; 154 158 $scope.quizState = 'fetched';
$scope.answer = ''; // reset answer 155 159
$scope.inQuestionsModal = true; 156 160 }).error(function(err) {
$scope.quizModalFetch(); 157 161 console.log('Fetch Error');
$scope.quizState = 'fetched'; 158 162 });
159 163 };
}).error(function(err) { 160 164
console.log('Fetch Error'); 161 165 /* Transitions from the user input to the results modal */
}); 162 166 $scope.sendAnswer = function(ans) {
}; 163 167 $scope.busy = true;
164 168 console.log('my answer', ans);
/* Transitions from the user input to the results modal */ 165 169 //Answer sending
170
$scope.sendAnswer = function(ans) { 166 171 if (ans != '') {
172 if( ans.length > 255 ){
173 ans = ans.substring(0, 255);
174 console.log('truncated answer', ans);
175 }
$scope.busy = true; 167 176 var quizAns = {
console.log('my answer', ans); 168 177 'pk': $scope.quiz.pk,
//Answer sending 169 178 'response': ans
170 179 };
if (ans != '') { 171 180
if( ans.length > 255 ){ 172 181 $http.patch('/api/study/' + $scope.quiz.pk, quizAns).
ans = ans.substring(0, 255); 173 182 success(function(data) {
console.log('truncated answer', ans); 174 183 $scope.busy = false;
} 175 184 $scope.quizModalClose();
var quizAns = { 176 185 $scope.resultModalFetch();
'pk': $scope.quiz.pk, 177 186 $scope.inResultsModal = true;
'response': ans 178 187 });
}; 179 188 $scope.inQuestionsModal = false;
180 189 } else {
$http.patch('/api/study/' + $scope.quiz.pk, quizAns). 181 190 console.log('NO ANSWER, NO GO!');
success(function(data) { 182 191 }
$scope.busy = false; 183 192 };
$scope.quizModalClose(); 184 193
$scope.resultModalFetch(); 185 194 $scope.sendCorrectness = function(correctness) {
$scope.inResultsModal = true; 186 195 var quizAns = {
}); 187 196 'pk': $scope.quiz.pk,
$scope.inQuestionsModal = false; 188 197 'correct': correctness
} else { 189 198 };
console.log('NO ANSWER, NO GO!'); 190 199 $scope.busy = true;
} 191 200 $http.patch('/api/study/' + $scope.quiz.pk, quizAns).
}; 192 201 success(function(data) {
193 202 console.log('Fetched card:', data);
$scope.sendCorrectness = function(correctness) { 194 203 $scope.resultModalClose();
var quizAns = { 195 204 $scope.fetchQuiz();
'pk': $scope.quiz.pk, 196 205 $scope.busy = false;
'correct': correctness 197 206 $scope.answer = ''; // reset answer
}; 198 207 }).error(function(err) {
$scope.busy = true; 199 208 console.log('Fetch Error');
$http.patch('/api/study/' + $scope.quiz.pk, quizAns). 200 209 });
success(function(data) { 201 210 $scope.inResultsModal = false;
console.log('Fetched card:', data); 202 211 };
$scope.resultModalClose(); 203 212
$scope.fetchQuiz(); 204 213 $(document).keydown(function(e) {
$scope.busy = false; 205 214 var keyed = e.which;
$scope.answer = ''; // reset answer 206 215 if ($scope.inResultsModal) {
}).error(function(err) { 207 216 if (keyed == 89) { // 'Y' keydown
console.log('Fetch Error'); 208 217 $scope.sendCorrectness(true);
}); 209 218 } else if (keyed == 78) { // 'N' keydown
$scope.inResultsModal = false; 210 219 $scope.sendCorrectness(false);
}; 211 220 }
212 221 }
$(document).keydown(function(e) { 213 222 if ($scope.inQuestionsModal && !$scope.hasBlanks) {
var keyed = e.which; 214 223 if (keyed == 13) { // 'enter' keydown
if ($scope.inResultsModal) { 215 224 console.log('the KEY');
if (keyed == 89) { // 'Y' keydown 216 225 $scope.fetchQuiz();
$scope.sendCorrectness(true); 217 226 }
} else if (keyed == 78) { // 'N' keydown 218 227 }
$scope.sendCorrectness(false); 219 228 });
} 220 229
} 221 230
if ($scope.inQuestionsModal && !$scope.hasBlanks) { 222 231 /* OLD STUFF :in case you still neeed it */
if (keyed == 13) { // 'enter' keydown 223 232 // Flashcard content
console.log('the KEY'); 224 233 $scope.htmlContent = 'sample text here longwordddddddddddddddddddddddddddd hello there from js review ctrl alwkejflakewjflk awjkefjkwefjlkea jfkewjaweajkakwef jk fjeawkafj kaewjf jawekfj akwejfk ';
$scope.fetchQuiz(); 225 234 //single card
} 226 235 $scope.samples =
templates/study.html View file @ 95fe801
<div class="container container--x"> 1 1 <div class="container container--x">
<ul class="collection st-accordion"> 2 2 <ul class="collection st-accordion">
<li class="st-accordion--item"> 3 3 <li class="st-accordion--item">
<div class="st-accordion--header no-press"> 4 4 <div class="st-accordion--header no-press">
<i class="mdi-image-filter-drama"></i> 5 5 <i class="mdi-image-filter-drama"></i>
Choose a class to study (optional, default is all classes) 6 6 Choose a class to study (optional, default is all classes)
</div> 7 7 </div>
<div id="content-x" class="st-accordion--content"> 8 8 <div id="content-x" class="st-accordion--content">
<!-- lots of difficulty with materializecss select and angularjs. If we want to 9 9 <!-- lots of difficulty with materializecss select and angularjs. If we want to
refactor into a select(which prob looks better), maybe refer to this article: 10 10 refactor into a select(which prob looks better), maybe refer to this article:
http://stackoverflow.com/questions/29402495/values-not-showing-up-in-select-button 11 11 http://stackoverflow.com/questions/29402495/values-not-showing-up-in-select-button
--> 12 12 -->
<!-- Also suffered huge casualties trying to do radios...let's just do buttons... 13 13 <!-- Also suffered huge casualties trying to do radios...let's just do buttons...
--> 14 14 -->
15 15
<!-- Default: all classes button --> 16 16 <!-- Default: all classes button -->
<!-- Button for classes --> 17 17 <!-- Button for classes -->
<div class="row"> 18 18 <div class="row">
<div class="card-panel"> 19 19 <div class="card-panel">
<div class="row"> 20 20 <div class="row">
21 21
<!-- Buttons of rest of classes --> 22 22 <!-- Buttons of rest of classes -->
<div ng-repeat="section in UserService.getUserData().sections"> 23 23 <div ng-repeat="section in UserService.getUserData().sections">
<a class="waves-effect waves-light btn-flat toggley" 24 24 <a class="waves-effect waves-light btn-flat toggley"
ng-click="toggleSectionToStudy(section.id)" 25 25 ng-click="toggleSectionToStudy(section.id)"
ng-class="{'pink white-text': sectionToStudy == section.id}"> 26 26 ng-class="{'pink white-text': sectionToStudy == section.id}">
{{section.short_name}} 27 27 {{section.short_name}}
</a> 28 28 </a>
</div> 29 29 </div>
</div> 30 30 </div>
</div> 31 31 </div>
</div> 32 32 </div>
</div> 33 33 </div>
</li> 34 34 </li>
<li class="st-accordion--item"> 35 35 <li class="st-accordion--item">
<div class="st-accordion--header no-press"> 36 36 <div class="st-accordion--header no-press">
<i class="mdi-image-filter-drama"></i> 37 37 <i class="mdi-image-filter-drama"></i>
Choose a date range to study (optional, defualt is entire quarter) 38 38 Choose a date range to study (optional, defualt is entire quarter)
</div> 39 39 </div>
<div id="content-dateselection" class="st-accordion--content open"> 40 40 <div id="content-dateselection" class="st-accordion--content open">
<div class="row"> 41 41 <div class="row">
<div class="card-panel"> 42 42 <div class="card-panel">
<div class="row"> 43 43 <div class="row">
44 <!--
<!-- 44 45 <p class="range-field">
<p class="range-field"> 45 46 <input type="date" id="date-pick-start" class="datepicker" value="Date Picker">
<input type="date" id="date-pick-start" class="datepicker" value="Date Picker"> 46 47 </p> -->
</p> --> 47 48 <input id="start-date" type="date" class="" placeholder="Start Date"/>
<input id="start-date" type="date" class="" placeholder="Start Date"/> 48 49 <input id="end-date" type="date" class="" placeholder="End Date"/>
<input id="end-date" type="date" class="" placeholder="End Date"/> 49 50
50 51
51 52 <!-- JQUERY RANGE SLIDER -->
<!-- JQUERY RANGE SLIDER --> 52 53 <!--
<!-- 53 54 <p>
<p> 54 55 <label for="amount">Price range:</label>
<label for="amount">Price range:</label> 55 56 <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> 56 57 </p>
</p> 57 58 <div id="slider-range"></div>
<div id="slider-range"></div> 58 59 -->
--> 59 60
60 61 </div>
</div> 61 62 </div>
</div> 62 63 </div>
</div> 63 64 </div>
</div> 64 65 </li>
</li> 65 66 </ul>
</ul> 66 67
67 68 <div class="row">
<div class="row"> 68 69 <div class="card-action">
<div class="card-action"> 69 70 <button class="btn waves-effect waves-light fetch" ng-click="fetchQuiz()">
<button class="btn waves-effect waves-light fetch" ng-click="fetchQuiz()"> 70 71 Fetch!
Fetch! 71 72 <i class="mdi-content-send right"></i>
<i class="mdi-content-send right"></i> 72 73 </button>
</button> 73 74 </div>
</div> 74 75 </div>
</div> 75 76 </div> <!-- End of .container-->
</div> <!-- End of .container--> 76 77
77 78
78 79 <!-- Fetched card "quiz" -->
<!-- Fetched card "quiz" --> 79 80 <!-- Modal Structure -->
<!-- Modal Structure --> 80 81 <div id="quizup--question" class="quizup modal modal-fixed-footer">
<div id="quizup--question" class="quizup modal modal-fixed-footer"> 81 82 <button class="btn grey lighten-2 exiter" ng-click="quizModalClose()"><i class="mdi-content-clear"></i></button>
<button class="btn grey lighten-2 exiter" ng-click="quizModalClose()"><i class="mdi-content-clear"></i></button> 82 83
83 84 <form>
<form> 84 85 <div class="modal-content">
<div class="modal-content"> 85 86 <h4 class="weight">Study Card #{{cardCount}}</h4>
<h4 class="weight">Study Card #{{cardCount}}</h4> 86 87
87 88 <p ng-if="!hasBlanks" style="font-size: 12pt"><i>This card has no blanks, but please read over it.</i></p>
<p ng-if="!hasBlanks" style="font-size: 12pt"><i>This card has no blanks, but please read over it.</i></p> 88 89
89 90 <div class="card card-facade valign-wrapper">
<div class="card card-facade valign-wrapper"> 90 91 <div class="card-content valign center-align">
<div class="card-content valign center-align"> 91 92 <div ng-if="!hasBlanks" class="quizup--text-frag">{{quiz.text}}</div>
<div ng-if="!hasBlanks" class="quizup--text-frag">{{quiz.text}}</div> 92 93
93 94 <div class="quizup--text-frag" ng-if="hasBlanks">{{text0}}</div>
<div class="quizup--text-frag" ng-if="hasBlanks">{{text0}}</div> 94 95 <input ng-show="hasBlanks" id="answer" class="answer" type="text" placeholder="ANSWER" ng-init="answer=''"
<input ng-show="hasBlanks" id="answer" class="answer" type="text" placeholder="ANSWER" ng-init="answer=''" 95 96 ng-model="answer"></input>
ng-model="answer"></input> 96 97
97 98 <div ng-if="hasBlanks" class="quizup--text-frag">{{text1}}</div>
<div ng-if="hasBlanks" class="quizup--text-frag">{{text1}}</div> 98 99
99 100 </div>
</div> 100 101 </div>
</div> 101 102 </div>
</div> 102 103 <div class="modal-footer">
<div class="modal-footer"> 103 104 <!-- Card has blanks button -->
<!-- Card has blanks button --> 104 105 <button class="btn" type="submit"
<button class="btn" type="submit" 105 106 ng-if="hasBlanks"
ng-if="hasBlanks" 106 107 ng-click="!busy && sendAnswer(answer)"
ng-click="!busy && sendAnswer(answer)" 107 108 ng-class="{'disabled': busy || answer==''}"
ng-class="{'disabled': busy || answer==''}" 108 109 data-tooltip="Enter">CHECK
data-tooltip="Enter">CHECK 109 110 <i class="mdi-hardware-keyboard-return right"></i>
<i class="mdi-hardware-keyboard-return right"></i> 110 111 </button>
</button> 111 112 <!-- No blanks button -->
<!-- No blanks button --> 112 113 <button class="btn" type="submit" id="next-card-btn"
<button class="btn" type="submit" id="next-card-btn" 113 114 ng-if="!hasBlanks"
ng-if="!hasBlanks" 114 115 ng-click="fetchQuiz()"
ng-click="fetchQuiz()" 115 116 data-tooltip="Enter">NEXT
data-tooltip="Enter">NEXT 116 117 <i class="mdi-hardware-keyboard-return right"></i>
<i class="mdi-hardware-keyboard-return right"></i> 117 118 </button>
</button> 118 119 </div>
</div> 119 120 </form>
</form> 120 121 </div>
</div> 121 122
122 123 <!-- Quiz results page that shows user answer and actual answer and allows
<!-- Quiz results page that shows user answer and actual answer and allows 123 124 User to choose correctness -->
User to choose correctness --> 124 125 <div id="quizup--result" class="quizup modal modal-fixed-footer">
<div id="quizup--result" class="quizup modal modal-fixed-footer"> 125 126 <button class="btn grey lighten-2 exiter" ng-click="resultModalClose()"><i class="mdi-content-clear"></i></button>
<button class="btn grey lighten-2 exiter" ng-click="resultModalClose()"><i class="mdi-content-clear"></i></button> 126 127
127 128 <form>
<form> 128 129 <div class="modal-content">
<div class="modal-content"> 129 130 <div class="modal-cardbox">
<div class="modal-cardbox"> 130 131 <h4 class="weight"> The answer</h4>
<h4 class="weight"> The answer</h4> 131 132
132 133 <div class="card card-facade valign-wrapper">
<div class="card card-facade valign-wrapper"> 133 134 <div class="card-content valign center-align">
<div class="card-content valign center-align"> 134 135 {{text0}} <u><b>{{textblank}}</b></u>{{text1}}
{{text0}} <u><b>{{textblank}}</b></u>{{text1}} 135 136 </div>
</div> 136 137 </div>
</div> 137 138 </div>
</div> 138 139
139 140 <div class="modal-cardbox">
<div class="modal-cardbox"> 140 141 <h4 class="weight">Your response</h4>
<h4 class="weight">Your response</h4> 141 142
142 143 <div class="card card-facade valign-wrapper">
<div class="card card-facade valign-wrapper"> 143 144 <div class="card-content valign center-align">
<div class="card-content valign center-align"> 144 145 {{text0}} <u><b>{{answer}}</b></u>{{text1}}
{{text0}} <u><b>{{answer}}</b></u>{{text1}} 145 146 </div>
</div> 146 147 </div>
</div> 147 148 </div>
</div> 148 149 </div>
</div> 149 150 <div class="modal-footer">