Permalink
Browse files

show correct or incorrect when you answer

  • Loading branch information...
1 parent cabc672 commit 5648991cf4388700b6adb0012a3bd27b6f8c7cf4 @seanmoon committed Feb 11, 2012
Showing with 42 additions and 16 deletions.
  1. +10 −1 spec/QuizSpec.js
  2. +2 −0 spec/WordSpec.js
  3. +6 −1 src/Quiz.js
  4. +3 −3 src/index.html
  5. +21 −11 src/korean.css
View
11 spec/QuizSpec.js
@@ -10,7 +10,7 @@ describe("Quiz", function() {
});
function initializeQuiz(quiz) {
- quiz.initialize($("<input></input>"), $("<div></div>"), $("<div></div>"));
+ quiz.initialize($("<input></input>"), $("<div></div>"), $("<div></div>"), $("<div></div>"), $("<div></div>"));
}
describe("initialization", function() {
@@ -22,6 +22,7 @@ describe("Quiz", function() {
expect(quiz.inputEl).toBeDefined();
expect(quiz.solutionEl).toBeDefined();
expect(quiz.hintEl).toBeDefined();
+ expect(quiz.statusEl).toBeDefined();
});
it("should bind a keyDown handler to inputEl", function() {
@@ -71,6 +72,10 @@ describe("Quiz", function() {
expect(quiz.inputEl.val()).toBe("");
});
+ it("should change the status to correct", function() {
+ expect(quiz.statusEl.html()).toBe("correct!");
+ });
+
it("should blur and refocus the input", function() {
// TODO: how to test this?
});
@@ -85,6 +90,10 @@ describe("Quiz", function() {
it("shouldn't advance to the next word", function() {
expect(quiz.words.length).toBe(1);
});
+
+ it("should change the status to incorrect", function() {
+ expect(quiz.statusEl.html()).toBe("incorrect!");
+ });
});
});
});
View
2 spec/WordSpec.js
@@ -15,3 +15,5 @@ describe("Word", function() {
});
});
});
+
+
View
7 src/Quiz.js
@@ -1,11 +1,12 @@
function Quiz() {}
-Quiz.prototype.initialize = function(inputEl, solutionEl, hintEl) {
+Quiz.prototype.initialize = function(inputEl, solutionEl, hintEl, statusEl) {
var self = this;
this.inputEl = inputEl;
this.solutionEl = solutionEl;
this.hintEl = hintEl;
+ this.statusEl = statusEl;
this.inputEl.keydown(function(e) {
if (e.keyCode == 13) {
@@ -22,7 +23,11 @@ Quiz.prototype.start = function(words) {
Quiz.prototype.checkMatch = function() {
if (this.solutionEl.html() == this.inputEl.val()) {
this.nextWord();
+ this.statusEl.html("correct!")
+ } else {
+ this.statusEl.html("incorrect!")
}
+ this.statusEl.show().fadeOut();
}
Quiz.prototype.nextWord = function() {
View
6 src/index.html
@@ -14,7 +14,6 @@
<script type="text/javascript" src="Word.js" charset="UTF-8"></script>
<script type="text/javascript" src="Quiz.js" charset="UTF-8"></script>
-
</head>
<body>
@@ -23,14 +22,15 @@
<div id="solution" style="display: none;"></div>
<div id="hint"></div>
<input type="text"><div>
+ <div id="status">correct!</div>
</div>
</div>
<script type="text/javascript">
(function() {
var quiz = new Quiz();
- quiz.initialize($("input"), $("#solution"), $("#hint"));
- quiz.start(Word.firstSet);
+ quiz.initialize($("input"), $("#solution"), $("#hint"), $("#status"));
+ quiz.start(Word.secondSet);
})();
</script>
</body>
View
32 src/korean.css
@@ -1,42 +1,52 @@
body {
+ background-color: #e0e5e9;
color: #444;
font-family: 'Magra', sans-serif;
- background-color: #e0e5e9;
- overflow: hidden;
font-size: 24px;
+ overflow: hidden;
text-align: center;
}
+
input {
+ background-color: #fcfcfc;
+ border-top: none;
+ border-left: none;
+ border-right: none;
+ border-bottom: solid 1px #ccc;
color: #444;
font-family: 'Magra', sans-serif;
- background-color: #fcfcfc;
- margin-bottom: 30px;
font-size: 36px;
- border: none;
- border-bottom: solid 1px #ccc;
+ margin-bottom: 30px;
text-align: center;
width: 300px;
}
+
#parapper {
margin: 50px;
}
+
#quiz {
background-color: #fcfcfc;
- box-shadow: 2px 2px 5px #888;
border-radius: 15px;
+ box-shadow: 2px 2px 5px #888;
+ height: 220px;
margin: 0 auto;
padding: 20px;
width: 500px;
}
+
#hint {
- width: 100%;
font-size: 36px;
- margin-top: 50px;
margin-bottom: 30px;
+ margin-top: 50px;
+ width: 100%;
}
+
#title {
float: left;
}
-#stats {
- float: right;
+
+#status {
+ display: none;
+ margin: auto;
}

0 comments on commit 5648991

Please sign in to comment.