110swag / flashy-frontend

Download as
Browse Code ยป

Commit 7e90e5aeac3562a6156199bf7a548f84d2994404

Authored by Andrew Buss
1 parent fbe96ab3a4
Exists in master

try to cloak flashcard qui

Showing 2 changed files with 8 additions and 8 deletions Inline Diff

scripts/HelpController.js View file @ 7e90e5a
angular.module('flashy.HelpController', ['ui.router']). 1 1 angular.module('flashy.HelpController', ['ui.router']).
2 2
controller('HelpController', function($scope, $state, $http, $timeout) { 3 3 controller('HelpController', function ($scope, $state, $http, $timeout) {
$scope.toggleContent = function(event, index) { 4 4 $scope.toggleContent = function (event, index) {
console.log(event, index); 5 5 console.log(event, index);
6 6
if ($('#content-' + index).hasClass('open')) { // let's close it 7 7 if ($('#content-' + index).hasClass('open')) { // let's close it
// Note: 250 is duration (ms) of animation 8 8 // Note: 250 is duration (ms) of animation
$('#content-' + index).slideUp(250).removeClass('open'); 9 9 $('#content-' + index).slideUp(250).removeClass('open');
} else { // let'd open it 10 10 } else { // let'd open it
$('#content-' + index).slideDown(250).addClass('open'); 11 11 $('#content-' + index).slideDown(250).addClass('open');
} 12 12 }
13 13
// event.currentTarget 14 14 // event.currentTarget
}; 15 15 };
16 16
$scope.closeContent = function(event) { 17 17 $scope.closeContent = function (event) {
18 18
}; 19 19 };
20 20
// JSON OF FAQ ENTRIES 21 21 // JSON OF FAQ ENTRIES
$scope.entries = [ 22 22 $scope.entries = [
{ 23 23 {
// icon: 'mdi-editor-insert-emoticon small', 24 24 // icon: 'mdi-editor-insert-emoticon small',
question: 'What is Flashy?', 25 25 question: 'What is Flashy?',
answer: '<p>Flashy is a service for creating, sharing, and reviewing flashcards for your courses.' + 26 26 answer: '<p>Flashy is a service for creating, sharing, and reviewing flashcards for your courses.' +
'</p><p>Flashy is optimized for contributing cards in real time during lecture to a shared live' + 27 27 '</p><p>Flashy is optimized for contributing cards in real time during lecture to a shared live' +
" feed. Don't want to contribute cards? That's fine! By adding others' cards to your deck, you" + 28 28 " feed. Don't want to contribute cards? That's fine! By adding others' cards to your deck, you" +
' help identify high-quality cards which should remain at the top of the feed for others to choose.' + 29 29 ' help identify high-quality cards which should remain at the top of the feed for others to choose.' +
'</p><p>Based on the principles of spaced repetition, Flashy also intelligently determines which' + 30 30 '</p><p>Based on the principles of spaced repetition, Flashy also intelligently determines which' +
' cards you are most at risk of forgetting, based on your review history. Receive push ' + 31 31 ' cards you are most at risk of forgetting, based on your review history. Receive push ' +
"notifications on your Android device's Chrome browser without installing any other app," + 32 32 "notifications on your Android device's Chrome browser without installing any other app," +
" and we'll notify you when you have a few cards which need to be reviewed.</p>" 33 33 " and we'll notify you when you have a few cards which need to be reviewed.</p>"
}, 34 34 },
{ 35 35 {
// icon: 'mdi-file-cloud-queue small', 36 36 // icon: 'mdi-file-cloud-queue small',
question: 'Does Flashy work outside of UCSD?', 37 37 question: 'Does Flashy work outside of UCSD?',
answer: "To simplify development, Flashy was configured only for courses at UCSD. If you'd like Flashy for your school, please send us an email to let us know!" 38 38 answer: "To simplify development, Flashy was configured only for courses at UCSD. If you'd like Flashy for your school, please send us an email to let us know!"
}, 39 39 },
{ 40 40 {
// icon: 'mdi-hardware-security small', 41 41 // icon: 'mdi-hardware-security small',
question: 'How do registration and verification work?', 42 42 question: 'How do registration and verification work?',
answer: "An account is required to use Flashy. We store the cards you save to your deck with your account. When you register, you'll be able to use the site immediately, but you must verify ownership of your email address within 24 hours. After 24 hours have passed, you'll need to verify your address before continuing to use the site. Don't worry, your cards and deck won't be deleted." 43 43 answer: "An account is required to use Flashy. We store the cards you save to your deck with your account. When you register, you'll be able to use the site immediately, but you must verify ownership of your email address within 24 hours. After 24 hours have passed, you'll need to verify your address before continuing to use the site. Don't worry, your cards and deck won't be deleted."
}, 44 44 },
{ 45 45 {
question: "My question isn't answered above", 46 46 question: "My question isn't answered above",
answer: '<a href="mailto:or.so.help.me@flashy.cards">Send us an email</a> or join us on Freenode in <a href="irc://irc.freenode.net/flashy">#flashy</a>!' 47 47 answer: '<a href="mailto:or.so.help.me@flashy.cards">Send us an email</a> or join us on Freenode in <a href="irc://irc.freenode.net/flashy">#flashy</a>!'
}]; 48 48 }];
49 49
// Functions 50 50 // Functions
$scope.toggleContent = function(event, index) { 51 51 $scope.toggleContent = function (event, index) {
if ($('#content-' + index).hasClass('open')) { // let's close it 52 52 if ($('#content-' + index).hasClass('open')) { // let's close it
// Note: 250 is duration (ms) of animation 53 53 // Note: 250 is duration (ms) of animation
$('#content-' + index).slideUp(250).removeClass('open'); 54 54 $('#content-' + index).slideUp(250).removeClass('open');
} else { // let's open it 55 55 } else { // let's open it
$('#content-' + index).slideDown(250).addClass('open'); 56 56 $('#content-' + index).slideDown(250).addClass('open');
} 57 57 }
}; 58 58 };
59 59
$scope.expandAllContent = function() { 60 60 $scope.expandAllContent = function () {
for (var i = 0; i < $scope.entries.length; i++) { 61 61 for (var i = 0; i < $scope.entries.length; i++) {
$('#content-' + i).slideDown(0).addClass('open'); 62 62 $('#content-' + i).slideDown(0).addClass('open');
} 63 63 }
}; 64 64 };
65 65
$scope.collapseAllContent = function() { 66 66 $scope.collapseAllContent = function () {
for (var i = 0; i < $scope.entries.length; i++) { 67 67 for (var i = 0; i < $scope.entries.length; i++) {
$('#content-' + i).slideUp(0).removeClass('open'); 68 68 $('#content-' + i).slideUp(0).removeClass('open');
templates/study.html View file @ 7e90e5a
<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>
</ul> 35 35 </ul>
36 36
<div class="row"> 37 37 <div class="row">
<div class="card-action"> 38 38 <div class="card-action">
<button class="btn waves-effect waves-light fetch" ng-click="fetchQuiz()"> 39 39 <button class="btn waves-effect waves-light fetch" ng-click="fetchQuiz()">
Fetch! 40 40 Fetch!
<i class="mdi-content-send right"></i> 41 41 <i class="mdi-content-send right"></i>
</button> 42 42 </button>
</div> 43 43 </div>
</div> 44 44 </div>
</div> <!-- End of .container--> 45 45 </div> <!-- End of .container-->
46 46
47 47
<!-- Fetched card "quiz" --> 48 48 <!-- Fetched card "quiz" -->
<!-- Modal Structure --> 49 49 <!-- Modal Structure -->
<div id="quizup--question" class="quizup modal modal-fixed-footer"> 50 50 <div id="quizup--question" class="quizup modal modal-fixed-footer" ng-cloak>
<button class="btn grey lighten-2 exiter" ng-click="quizModalClose()"><i class="mdi-content-clear"></i></button> 51 51 <button class="btn grey lighten-2 exiter" ng-click="quizModalClose()"><i class="mdi-content-clear"></i></button>
52 52
<form> 53 53 <form>
<div class="modal-content"> 54 54 <div class="modal-content">
<h4 class="weight">Study Card #{{cardCount}}</h4> 55 55 <h4 class="weight">Study Card #{{cardCount}}</h4>
56 56
<p ng-if="!hasBlanks" style="font-size: 12pt"><i>This card has no blanks, but please read over it.</i></p> 57 57 <p ng-if="!hasBlanks" style="font-size: 12pt"><i>This card has no blanks, but please read over it.</i></p>
58 58
<div class="card card-facade valign-wrapper"> 59 59 <div class="card card-facade valign-wrapper">
<div class="card-content valign center-align"> 60 60 <div class="card-content valign center-align">
<div ng-if="!hasBlanks" class="quizup--text-frag">{{quiz.text}}</div> 61 61 <div ng-if="!hasBlanks" class="quizup--text-frag">{{quiz.text}}</div>
62 62
<div class="quizup--text-frag" ng-if="hasBlanks">{{text0}}</div> 63 63 <div class="quizup--text-frag" ng-if="hasBlanks">{{text0}}</div>
<input ng-show="hasBlanks" id="answer" class="answer" type="text" placeholder="ANSWER" ng-init="answer=''" 64 64 <input ng-show="hasBlanks" id="answer" class="answer" type="text" placeholder="ANSWER" ng-init="answer=''"
ng-model="answer"></input> 65 65 ng-model="answer"/>
66 66
<div ng-if="hasBlanks" class="quizup--text-frag">{{text1}}</div> 67 67 <div ng-if="hasBlanks" class="quizup--text-frag">{{text1}}</div>
68 68
</div> 69 69 </div>
</div> 70 70 </div>
</div> 71 71 </div>
<div class="modal-footer"> 72 72 <div class="modal-footer">
<!-- Card has blanks button --> 73 73 <!-- Card has blanks button -->
<button class="btn" type="submit" 74 74 <button class="btn" type="submit"
ng-if="hasBlanks" 75 75 ng-if="hasBlanks"
ng-click="!busy && sendAnswer(answer)" 76 76 ng-click="!busy && sendAnswer(answer)"
ng-class="{'disabled': busy || answer==''}" 77 77 ng-class="{'disabled': busy || answer==''}"
data-tooltip="Enter">CHECK 78 78 data-tooltip="Enter">CHECK
<i class="mdi-hardware-keyboard-return right"></i> 79 79 <i class="mdi-hardware-keyboard-return right"></i>
</button> 80 80 </button>
<!-- No blanks button --> 81 81 <!-- No blanks button -->
<button class="btn" type="submit" id="next-card-btn" 82 82 <button class="btn" type="submit" id="next-card-btn"
ng-if="!hasBlanks" 83 83 ng-if="!hasBlanks"
ng-click="fetchQuiz()" 84 84 ng-click="fetchQuiz()"
data-tooltip="Enter">NEXT 85 85 data-tooltip="Enter">NEXT
<i class="mdi-hardware-keyboard-return right"></i> 86 86 <i class="mdi-hardware-keyboard-return right"></i>
</button> 87 87 </button>
</div> 88 88 </div>
</form> 89 89 </form>
</div> 90 90 </div>
91 91
<!-- Quiz results page that shows user answer and actual answer and allows 92 92 <!-- Quiz results page that shows user answer and actual answer and allows
User to choose correctness --> 93 93 User to choose correctness -->
<div id="quizup--result" class="quizup modal modal-fixed-footer"> 94 94 <div id="quizup--result" class="quizup modal modal-fixed-footer">
<button class="btn grey lighten-2 exiter" ng-click="resultModalClose()"><i class="mdi-content-clear"></i></button> 95 95 <button class="btn grey lighten-2 exiter" ng-click="resultModalClose()"><i class="mdi-content-clear"></i></button>
96 96
<form> 97 97 <form>
<div class="modal-content"> 98 98 <div class="modal-content">
<div class="modal-cardbox"> 99 99 <div class="modal-cardbox">
<h4 class="weight"> The answer</h4> 100 100 <h4 class="weight"> The answer</h4>
101 101
<div class="card card-facade valign-wrapper"> 102 102 <div class="card card-facade valign-wrapper">
<div class="card-content valign center-align"> 103 103 <div class="card-content valign center-align">
{{text0}} <u><b>{{textblank}}</b></u>{{text1}} 104 104 {{text0}} <u><b>{{textblank}}</b></u>{{text1}}
</div> 105 105 </div>
</div> 106 106 </div>
</div> 107 107 </div>
108 108
<div class="modal-cardbox"> 109 109 <div class="modal-cardbox">
<h4 class="weight">Your response</h4> 110 110 <h4 class="weight">Your response</h4>
111 111
<div class="card card-facade valign-wrapper"> 112 112 <div class="card card-facade valign-wrapper">
<div class="card-content valign center-align"> 113 113 <div class="card-content valign center-align">
{{text0}} <u><b>{{answer}}</b></u>{{text1}} 114 114 {{text0}} <u><b>{{answer}}</b></u>{{text1}}
</div> 115 115 </div>
</div> 116 116 </div>
</div> 117 117 </div>
</div> 118 118 </div>
<div class="modal-footer"> 119 119 <div class="modal-footer">
Is your response correct? 120 120 Is your response correct?
<div class="quizup--button-box"> 121 121 <div class="quizup--button-box">