From 24318ab8ed1f31b90923a663e1b56f6b8cd4eaa3 Mon Sep 17 00:00:00 2001 From: Shigeto Moriyasu Date: Thu, 4 Jan 2018 20:37:56 +0900 Subject: [PATCH 01/17] =?UTF-8?q?=E3=83=A9=E3=83=B3=E3=83=87=E3=82=A3?= =?UTF-8?q?=E3=83=B3=E3=82=B0=E3=83=9A=E3=83=BC=E3=82=B8=E4=BD=9C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 28 +++++++++++++++++----------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/public/index.html b/public/index.html index 036a914c8..df9fb1bf5 100644 --- a/public/index.html +++ b/public/index.html @@ -1,6 +1,6 @@ - + Learn JS! @@ -10,16 +10,22 @@ - - -
-

It works!

-
- You're ready to start! - Skeleton 2, jQuery 2, and AWS Libraries are included. -
+ + +
+
+
+

Learn JavaScript, one puzzle at a time.

+ Start Now! +
+
+ +
- +
+ From 62dc431eafadba61110a412a5e021b6bacc03b70 Mon Sep 17 00:00:00 2001 From: Shigeto Moriyasu Date: Thu, 4 Jan 2018 20:43:30 +0900 Subject: [PATCH 02/17] =?UTF-8?q?=E3=83=86=E3=82=B9=E3=83=88=E5=90=8D?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/tests/app_spec.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/public/tests/app_spec.js b/public/tests/app_spec.js index e69de29bb..6c3ee0872 100644 --- a/public/tests/app_spec.js +++ b/public/tests/app_spec.js @@ -0,0 +1,3 @@ +describe('LearnJS', function() { + it('can show a problem view', function() {}) +}) \ No newline at end of file From 60a8284abe56141094bba614c96e67a617c863ad Mon Sep 17 00:00:00 2001 From: Shigeto Moriyasu Date: Thu, 4 Jan 2018 20:47:00 +0900 Subject: [PATCH 03/17] =?UTF-8?q?showView=E3=83=86=E3=82=B9=E3=83=88?= =?UTF-8?q?=E6=9C=AC=E4=BD=93=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/tests/app_spec.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/public/tests/app_spec.js b/public/tests/app_spec.js index 6c3ee0872..800ebed3c 100644 --- a/public/tests/app_spec.js +++ b/public/tests/app_spec.js @@ -1,3 +1,6 @@ describe('LearnJS', function() { - it('can show a problem view', function() {}) + it('can show a problem view', function() { + learnjs.showView('#problem-1'); + expect($('.view-container .problem-view').length).toEqual(1); + }) }) \ No newline at end of file From 73dda1b560595530e91a294822f6d49c9a9221d4 Mon Sep 17 00:00:00 2001 From: Shigeto Moriyasu Date: Thu, 4 Jan 2018 20:48:20 +0900 Subject: [PATCH 04/17] =?UTF-8?q?strict=E3=83=A2=E3=83=BC=E3=83=89?= =?UTF-8?q?=E5=BC=B7=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/app.js | 1 + 1 file changed, 1 insertion(+) diff --git a/public/app.js b/public/app.js index e69de29bb..ccacec309 100644 --- a/public/app.js +++ b/public/app.js @@ -0,0 +1 @@ +'use strict' From d4efb5ea714d7d78c4e2f2f8d213078f05657f7e Mon Sep 17 00:00:00 2001 From: Shigeto Moriyasu Date: Thu, 4 Jan 2018 20:50:11 +0900 Subject: [PATCH 05/17] =?UTF-8?q?=E5=90=8D=E5=89=8D=E7=A9=BA=E9=96=93learn?= =?UTF-8?q?js=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/app.js | 1 + 1 file changed, 1 insertion(+) diff --git a/public/app.js b/public/app.js index ccacec309..1639aa2ff 100644 --- a/public/app.js +++ b/public/app.js @@ -1 +1,2 @@ 'use strict' +let learnjs = {} \ No newline at end of file From bc11f6e7b004274887bd55711a8c008c28cb970f Mon Sep 17 00:00:00 2001 From: Shigeto Moriyasu Date: Thu, 4 Jan 2018 20:54:05 +0900 Subject: [PATCH 06/17] =?UTF-8?q?=E3=83=AB=E3=83=BC=E3=82=BF=E9=96=A2?= =?UTF-8?q?=E6=95=B0showView=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/app.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/public/app.js b/public/app.js index 1639aa2ff..27bc4fd34 100644 --- a/public/app.js +++ b/public/app.js @@ -1,2 +1,6 @@ 'use strict' -let learnjs = {} \ No newline at end of file +let learnjs = {} +learnjs.showView = (hash) => { + let problemView = $('
').text('Coming soon!'); + $('.view-container').empty().append(problemView); +} From 0ae60adad3388ed49243f041aa84d388c64bdf36 Mon Sep 17 00:00:00 2001 From: Shigeto Moriyasu Date: Thu, 4 Jan 2018 21:00:20 +0900 Subject: [PATCH 07/17] =?UTF-8?q?=E3=83=93=E3=83=A5=E3=83=BC=E3=82=B3?= =?UTF-8?q?=E3=83=B3=E3=83=86=E3=83=8A=E4=BD=9C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/public/index.html b/public/index.html index df9fb1bf5..a73bf0dbe 100644 --- a/public/index.html +++ b/public/index.html @@ -16,14 +16,16 @@ -
-
-
-

Learn JavaScript, one puzzle at a time.

- Start Now! -
-
- +
+
+
+
+

Learn JavaScript, one puzzle at a time.

+ Start Now! +
+
+ +
From 39a63da4b1b3dd126c62b3fa899b18a8ff2ac2d2 Mon Sep 17 00:00:00 2001 From: Shigeto Moriyasu Date: Thu, 4 Jan 2018 21:54:34 +0900 Subject: [PATCH 08/17] =?UTF-8?q?=E3=83=AB=E3=83=BC=E3=83=88=E8=BF=BD?= =?UTF-8?q?=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/app.js | 16 +++++++++++++--- public/index.html | 18 ++++++++++-------- public/tests/app_spec.js | 9 +++++++-- 3 files changed, 30 insertions(+), 13 deletions(-) diff --git a/public/app.js b/public/app.js index 27bc4fd34..8deebb094 100644 --- a/public/app.js +++ b/public/app.js @@ -1,6 +1,16 @@ 'use strict' let learnjs = {} -learnjs.showView = (hash) => { - let problemView = $('
').text('Coming soon!'); - $('.view-container').empty().append(problemView); + +learnjs.problemView = () => { + return $('
').text('Coming soon!'); } + +learnjs.showView = (hash) => { + let routes = { + '#problem-1': learnjs.problemView + } + let viewFn = routes[hash]; + if (viewFn) { + $('.view-container').empty().append(viewFn()); + } +} \ No newline at end of file diff --git a/public/index.html b/public/index.html index a73bf0dbe..236d516ea 100644 --- a/public/index.html +++ b/public/index.html @@ -9,7 +9,7 @@ - @@ -30,9 +34,14 @@

Learn JavaScript, one puzzle at a time.

+
+
+

+
+
diff --git a/public/tests/app_spec.js b/public/tests/app_spec.js index 9fa6c3169..be45f8a11 100644 --- a/public/tests/app_spec.js +++ b/public/tests/app_spec.js @@ -15,7 +15,7 @@ describe('LearnJS', function() { describe('problem view', () => { it('has a title that includes the problem number', () => { let view = learnjs.problemView('1'); - expect(view.text()).toEqual('Problem #1 Coming soon!'); + expect(view.text().trim()).toEqual('Problem #1 Coming soon!'); }); }); it('invokes the router when loaded', () => { From 9c9f148f80a2a29e37a4106de054fe07cb08743e Mon Sep 17 00:00:00 2001 From: Shigeto Moriyasu Date: Thu, 4 Jan 2018 23:33:28 +0900 Subject: [PATCH 13/17] =?UTF-8?q?=E3=83=87=E3=83=BC=E3=82=BF=E3=83=A2?= =?UTF-8?q?=E3=83=87=E3=83=AB=E5=AE=9A=E7=BE=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/app.js | 40 +++++++++++++++++++++++++++++----------- public/index.html | 2 ++ public/tests/app_spec.js | 12 +++++++++++- 3 files changed, 42 insertions(+), 12 deletions(-) diff --git a/public/app.js b/public/app.js index c53ed2f40..6376777c0 100644 --- a/public/app.js +++ b/public/app.js @@ -1,26 +1,44 @@ -'use strict' -let learnjs = {} - +'use strict'; +let learnjs = {}; +learnjs.problems = [ + { + description: 'What is truth?', + code: 'function problem() { return __; }', + }, + { + description: 'Simple Math', + code: 'function problem() { return 42 === 6 * __; }', + }, +]; learnjs.appOnReady = () => { window.onhashchange = () => { learnjs.showView(window.location.hash); - } + }; learnjs.showView(window.location.hash); -} +}; + +learnjs.applyObject = function(obj, elem) { + for (let key in obj) { + elem.find('[data-name="' + key + '"]').text(obj[key]); + } +}; -learnjs.problemView = (problemNumber) => { +learnjs.problemView = (data) => { + let problemNumber = parseInt(data, 10); let view = $('.templates .problem-view').clone(); - view.find('.title').text('Problem #' + problemNumber + ' Coming soon!'); + view.find('.title').text('Problem #' + problemNumber); + learnjs.applyObject(learnjs.problems[problemNumber], view); return view; -} +}; learnjs.showView = (hash) => { let routes = { - '#problem': learnjs.problemView - } + '#problem': learnjs.problemView, + }; let hashParts = hash.split('-'); let viewFn = routes[hashParts[0]]; if (viewFn) { $('.view-container').empty().append(viewFn(hashParts[1])); } -} \ No newline at end of file +}; + diff --git a/public/index.html b/public/index.html index eec56f5d9..299daa967 100644 --- a/public/index.html +++ b/public/index.html @@ -37,6 +37,8 @@

Learn JavaScript, one puzzle at a time.

+

+
diff --git a/public/tests/app_spec.js b/public/tests/app_spec.js index be45f8a11..7d23d6209 100644 --- a/public/tests/app_spec.js +++ b/public/tests/app_spec.js @@ -15,7 +15,17 @@ describe('LearnJS', function() { describe('problem view', () => { it('has a title that includes the problem number', () => { let view = learnjs.problemView('1'); - expect(view.text().trim()).toEqual('Problem #1 Coming soon!'); + expect(view.find('.title').text().trim()).toEqual('Problem #1'); + }); + it('show the description that binds data', () => { + let view = learnjs.problemView('1'); + expect(view.find('[data-name="description"]').text().trim()). + toEqual('Simple Math'); + }); + it('show the problem code that binds data', () => { + let view = learnjs.problemView('1'); + expect(view.find('[data-name="code"]').text().trim()). + toEqual('function problem() { return 42 === 6 * __; }'); }); }); it('invokes the router when loaded', () => { From 93f8dc81c8936c38c18245c9b1ca04f18a4be9e9 Mon Sep 17 00:00:00 2001 From: Shigeto Moriyasu Date: Fri, 5 Jan 2018 00:59:03 +0900 Subject: [PATCH 14/17] =?UTF-8?q?=E3=83=A6=E3=83=BC=E3=82=B6=E3=83=BC?= =?UTF-8?q?=E5=85=A5=E5=8A=9B=E5=87=A6=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/app.js | 27 ++++++++++++++++++++++++++- public/index.html | 7 +++++++ public/tests/app_spec.js | 20 ++++++++++++++++++-- 3 files changed, 51 insertions(+), 3 deletions(-) diff --git a/public/app.js b/public/app.js index 6376777c0..712c48e8e 100644 --- a/public/app.js +++ b/public/app.js @@ -26,8 +26,27 @@ learnjs.applyObject = function(obj, elem) { learnjs.problemView = (data) => { let problemNumber = parseInt(data, 10); let view = $('.templates .problem-view').clone(); + let problemData = learnjs.problems[problemNumber - 1]; + let resultFlash = view.find('.result'); + + let checkAnswer = () => { + let answer = view.find('.answer').val(); + let test = problemData.code.replace('__', answer) + '; problem();'; + return eval(test); + }; + + let checkAnswerClick = () => { + if (checkAnswer()) { + learnjs.flashElement(resultFlash, 'Correct!'); + } else { + learnjs.flashElement(resultFlash, 'Incorrect!'); + } + return false; + }; + + view.find('.check-btn').click(checkAnswerClick); view.find('.title').text('Problem #' + problemNumber); - learnjs.applyObject(learnjs.problems[problemNumber], view); + learnjs.applyObject(problemData, view); return view; }; @@ -42,3 +61,9 @@ learnjs.showView = (hash) => { } }; +learnjs.flashElement = (elem, content) => { + elem.fadeOut('fast', () => { + elem.html(content); + elem.fadeIn(); + }); +}; diff --git a/public/index.html b/public/index.html index 299daa967..928b2da3f 100644 --- a/public/index.html +++ b/public/index.html @@ -39,6 +39,13 @@

Learn JavaScript, one puzzle at a time.

+
+ +
+ +

+
+
diff --git a/public/tests/app_spec.js b/public/tests/app_spec.js index 7d23d6209..750a691df 100644 --- a/public/tests/app_spec.js +++ b/public/tests/app_spec.js @@ -20,12 +20,12 @@ describe('LearnJS', function() { it('show the description that binds data', () => { let view = learnjs.problemView('1'); expect(view.find('[data-name="description"]').text().trim()). - toEqual('Simple Math'); + toEqual(learnjs.problems[0].description); }); it('show the problem code that binds data', () => { let view = learnjs.problemView('1'); expect(view.find('[data-name="code"]').text().trim()). - toEqual('function problem() { return 42 === 6 * __; }'); + toEqual(learnjs.problems[0].code); }); }); it('invokes the router when loaded', () => { @@ -39,5 +39,21 @@ describe('LearnJS', function() { $(window).trigger('hashchange'); expect(learnjs.showView).toHaveBeenCalledWith(window.location.hash); }); + describe('answer section', () => { + let view = undefined; + beforeEach(() => { + view = learnjs.problemView('1'); + }); + it('can check a correct answer by hitting a button', () => { + view.find('.answer').val('true'); + view.find('.check-btn').click(); + expect(view.find('.result').text()).toEqual('Correct!'); + }); + it('rejects an incorrect answer', () => { + view.find('.answer').val('false'); + view.find('.check-btn').click(); + expect(view.find('.result').text()).toEqual('Incorrect!'); + }); + }); }); From 90e1dd555305dc96ba3464281b74367016c55bbd Mon Sep 17 00:00:00 2001 From: Shigeto Moriyasu Date: Fri, 5 Jan 2018 01:40:41 +0900 Subject: [PATCH 15/17] =?UTF-8?q?=E3=83=8A=E3=83=93=E3=82=B2=E3=83=BC?= =?UTF-8?q?=E3=82=B7=E3=83=A7=E3=83=B3=E3=82=B3=E3=83=B3=E3=83=88=E3=83=AD?= =?UTF-8?q?=E3=83=BC=E3=83=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/app.js | 22 ++++++++++++++++++++-- public/index.html | 3 +++ public/tests/app_spec.js | 17 +++++++++++++++-- 3 files changed, 38 insertions(+), 4 deletions(-) diff --git a/public/app.js b/public/app.js index 712c48e8e..69bb61574 100644 --- a/public/app.js +++ b/public/app.js @@ -23,9 +23,10 @@ learnjs.applyObject = function(obj, elem) { } }; + learnjs.problemView = (data) => { let problemNumber = parseInt(data, 10); - let view = $('.templates .problem-view').clone(); + let view = learnjs.template('problem-view'); let problemData = learnjs.problems[problemNumber - 1]; let resultFlash = view.find('.result'); @@ -37,7 +38,8 @@ learnjs.problemView = (data) => { let checkAnswerClick = () => { if (checkAnswer()) { - learnjs.flashElement(resultFlash, 'Correct!'); + let correctFlash = learnjs.buildCorrectFlash(problemNumber); + learnjs.flashElement(resultFlash, correctFlash); } else { learnjs.flashElement(resultFlash, 'Incorrect!'); } @@ -67,3 +69,19 @@ learnjs.flashElement = (elem, content) => { elem.fadeIn(); }); }; + +learnjs.template = (name) => { + return $('.templates .' + name).clone(); +}; + +learnjs.buildCorrectFlash = (problemNumber) => { + let correctFlash = learnjs.template('correct-flash'); + let link = correctFlash.find('a'); + if (problemNumber < learnjs.problems.length) { + link.attr('href', '#problem-' + (problemNumber + 1)); + } else { + link.attr('href', ''); + link.text('You\'re Finished!'); + } + return correctFlash; +}; diff --git a/public/index.html b/public/index.html index 928b2da3f..41830abfb 100644 --- a/public/index.html +++ b/public/index.html @@ -47,6 +47,9 @@

+
+ Correct! Next Problem +