Permalink
Browse files

Fixed a few bugs. Tweaked the design to be more understandable.

  • Loading branch information...
iambrandonn committed Feb 18, 2013
1 parent 7f65006 commit 58a69a5b601255ea78e21af8d07b3d6938057d2d
Showing with 92 additions and 10 deletions.
  1. +8 −1 addEdit.js
  2. +12 −0 addEditList.html
  3. BIN arrow.png
  4. +5 −0 common.css
  5. +4 −0 common.js
  6. +22 −0 index.css
  7. +20 −3 index.html
  8. +21 −6 main.js
View
@@ -1,7 +1,7 @@
function getNumQuestions() {
var count = 0;
$('.key').each(function(element) {
- if ($(this).val().length > 1) {
+ if ($(this).val().length > 0) {
count++;
}
});
@@ -14,7 +14,14 @@ $('.saveButton').click(function() {
alert('You must provide at least two questions.');
return;
}
+
var categoryName = $('.categoryName').val();
+ if (categoryName.length === 0) {
+ $('.categoryName').focus();
+ alert('Please provide a category title');
+ return;
+ }
+
localStorage.setItem(categoryName, serializeQuestions());
var categoryList = localStorage.getItem('categories');
View
@@ -56,5 +56,17 @@
<script src="categories.js"></script>
<script src="common.js"></script>
<script src="addEdit.js"></script>
+
+ <script type="text/javascript">
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-5078580-4']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+ </script>
</body>
</html>
View
BIN arrow.png
Binary file not shown.
View
@@ -34,6 +34,11 @@ a:hover {
background-color: white;
margin: 10px;
border: 1px solid rgb(53, 95, 109);
+ -webkit-transition: all .3s;
+ -o-transition: all .3s;
+ -moz-transition: all .3s;
+ -ms-transition: all .3s;
+ transition: all .3s;
}
.navigation {
View
@@ -91,6 +91,10 @@ var common = {
},
categoryChanged: function() {
+ if (window.switchToSecondInstructions) {
+ window.switchToSecondInstructions();
+ }
+
document.getElementsByClassName('startButton')[0].classList.remove('disabled');
var previouslySelected = document.getElementsByClassName('selected');
for (var i = 0; i < previouslySelected.length; i++) {
View
@@ -125,4 +125,26 @@
.addMoreSection {
padding-left: 17px;
+}
+
+#categoryComponent {
+ box-shadow: 0 0 12px rgb(0, 115, 121);
+ -webkit-transition: all .7s;
+ -ms-transition: all .7s;
+ -o-transition: all .7s;
+ -moz-transition: all .7s;
+ transition: all .7s;
+}
+
+.leftArrow {
+ width: 100px;
+ height: 100px;
+ display: block;
+ margin: 38px 0 0 55px;
+ opacity: 1;
+ -webkit-transition: all 1.2s;
+ -ms-transition: all 1.2s;
+ -o-transition: all 1.2s;
+ -moz-transition: all 1.2s;
+ transition: all 1.2s;
}
View
@@ -10,7 +10,7 @@
<div class="warnings"></div>
<div class="content">
<span class="navigation">
- <div class="component">
+ <div id="categoryComponent" class="component">
<ul class="categoryList">
</ul>
@@ -27,8 +27,13 @@
</div>
</span>
<span class="problemArea">
- <div class="component instructions">
- You have 60 seconds. Click "Start" and the browser will ask you for permission to use the microphone. When cards start appearing say the answer out loud. You can choose from the default categories on the left or create your own list by clicking "Add more..."
+ <div class="component instructions" id="firstInstructions">
+ Which category would like to see problems for?
+ <img src="arrow.png" class="leftArrow" />
+ </div>
+
+ <div class="component instructions hidden" id="secondInstructions">
+ You will have 60 seconds to get as many correct as you can. When you click "Start" the browser will ask you for permission to use the microphone. Once cards start appearing, say the answers out loud. A new problem won't given until either you say "skip" or get the problem right.
</div>
<div class="component scores hidden">
@@ -64,5 +69,17 @@
<script src="common.js"></script>
<script src="sampleProblems.js"></script>
<script src="main.js"></script>
+
+ <script type="text/javascript">
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-5078580-4']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+ </script>
</body>
</html>
View
27 main.js
@@ -115,6 +115,11 @@ function startSpeechRecognition() {
speech.continuous = true;
speech.interimResults = true;
speech.onstart = function() {
+ document.getElementsByClassName('scores')[0].classList.remove('hidden');
+ document.getElementsByClassName('card')[0].classList.remove('hidden');
+ document.getElementsByClassName('iHeard')[0].classList.remove('hidden');
+ document.getElementById('secondInstructions').style.display = '';
+
errorOccurred = false;
currentScore = 0;
document.getElementById('currentScoreValue').textContent = currentScore;
@@ -259,10 +264,26 @@ function detectIfSpeechSupported() {
warningsElement.innerHTML = supportMessage;
}
+function switchToSecondInstructions() {
+ var first = document.getElementById('firstInstructions');
+ if (first.style.display !== 'none') {
+ document.getElementById('secondInstructions').style.display = 'block';
+ first.style.display = 'none';
+ }
+}
+
detectIfSpeechSupported();
common.renderCategories();
paintTimer(0.99999);
+setTimeout(function() {
+ document.getElementsByClassName('leftArrow')[0].style['margin-left'] ='0';
+ setTimeout(function() {
+ document.getElementsByClassName('leftArrow')[0].style['opacity'] ='0';
+ document.getElementById('categoryComponent').style['box-shadow'] ='0 0 0 rgb(0, 115, 121)';
+ }, 1500);
+}, 300);
+
var startButton = document.getElementsByClassName('startButton')[0];
startButton.addEventListener('click', function() {
if (this.classList.contains('disabled')) {
@@ -271,12 +292,6 @@ startButton.addEventListener('click', function() {
}
startSpeechRecognition();
-
- document.getElementsByClassName('scores')[0].classList.remove('hidden');
- document.getElementsByClassName('card')[0].classList.remove('hidden');
- document.getElementsByClassName('iHeard')[0].classList.remove('hidden');
-
- document.getElementsByClassName('instructions')[0].classList.add('hidden');
});
var doneSound = new Audio('done.mp3');

0 comments on commit 58a69a5

Please sign in to comment.