Compare View
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"> |