Skip to content

Commit 0d31dcb

Browse files
adamfortunaadamfortuna
committed
Proof of concept for try git style challenges
1 parent 74a734d commit 0d31dcb

10 files changed

Lines changed: 89 additions & 62 deletions

File tree

‎client/javascriptcom/directives/challenge.directive.js‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
angular.module('javascriptcom').directive('jsChallenge', ['jsChallengeProgress', 'jsCourseState', function(jsChallengeProgress, jsCourseState) {
1+
angular.module('javascriptcom').directive('jsChallenge', function() {
22
return {
33
templateUrl: 'templates/challenge.html',
44
replace: true,
@@ -7,22 +7,7 @@ angular.module('javascriptcom').directive('jsChallenge', ['jsChallengeProgress',
77
},
88
bindToController: true,
99
controllerAs: 'ctrl',
10-
controller: function jsChallengeController(jsChallengeProgress, jsCourseState) {
11-
this.state = jsCourseState.state;
12-
this.messages = [];
13-
14-
this.onSuccess = function onSuccess(challenge) {
15-
challenge.completed = true;
16-
jsChallengeProgress.next();
17-
}
18-
19-
this.onFailure = function onFailure(challenge) {
20-
console.log('challenge failure');
21-
}
22-
23-
this.activate = function(challenge) {
24-
jsChallengeProgress.activate(challenge);
25-
}
10+
controller: function jsChallengeController() {
2611
}
2712
};
28-
}]);
13+
});

‎client/javascriptcom/directives/console.directive.js‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,26 @@
1-
angular.module('javascriptcom').directive('jsConsole', ['CSConsole', 'jsCommand', function(CSConsole, jsCommand) {
1+
angular.module('javascriptcom').directive('jsConsole', ['CSConsole', 'jsCommand', 'jsChallengeProgress', function(CSConsole, jsCommand, jsChallengeProgress) {
22
return {
33
templateUrl: 'templates/console.html',
44
replace: true,
55
scope: true,
66
bindToController: true,
77
controllerAs: 'ctrl',
8-
require: '^jsChallenge',
8+
require: '^jsCourse',
99
link: function(scope, element, attrs, ctrl) {
1010
var el = $(element).find('.console-ui')[0];
11-
var command = new jsCommand(ctrl.challenge, ctrl.onSuccess, ctrl.onFailure, ctrl.messages);
11+
12+
var onSuccess = function onSuccess(challenge) {
13+
console.log('successful challenge!');
14+
challenge.completed = true;
15+
jsChallengeProgress.next();
16+
}
17+
18+
var onFailure = function onFailure(challenge) {
19+
console.log('failed challenge!');
20+
}
21+
22+
// Todo: Figure out how to make this work as a one time init
23+
var command = new jsCommand(onSuccess, onFailure, ctrl.messages);
1224

1325
ctrl.csConsole = new CSConsole(el, {
1426
prompt: '> ',

‎client/javascriptcom/directives/course.directive.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,21 @@ angular.module('javascriptcom').directive('jsCourse', ['_', 'jsCourseChallengeRe
77
},
88
bindToController: true,
99
controllerAs: 'ctrl',
10-
controller: function jsChallengeResourceController(jsCourseChallengeResource, jsChallengeProgress) {
10+
controller: function jsCourseDirective(jsCourseChallengeResource, jsChallengeProgress) {
1111
this.challengeProgress = jsChallengeProgress;
1212
this.challenges = jsCourseChallengeResource.query({ course: this.course });
13+
this.messages = [];
1314

1415
this.challengeProgress.setChallenges(this.challenges);
1516

16-
this.activateChallenge = function(challenge) {
17-
this.challengeProgress.activate(challenge)
17+
this.activateChallenge = function activateChallenge(_challenge) {
18+
this.challengeProgress.activate(_challenge)
19+
this.challenge = _challenge;
20+
}
21+
22+
23+
this.onWrapupPage = function onWrapupPage() {
24+
return jsChallengeProgress.activeChallenge() ? false : true;
1825
}
1926
}
2027
};

‎client/javascriptcom/directives/instructions.directive.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
angular.module('javascriptcom').directive('jsInstructions', ['$compile', 'marked', 'jsCourseState', function($compile, marked, jsCourseState) {
1+
angular.module('javascriptcom').directive('jsInstructions', function jsInstructions(){
22
return {
33
templateUrl: 'templates/instructions.html',
44
replace: true,
@@ -7,4 +7,4 @@ angular.module('javascriptcom').directive('jsInstructions', ['$compile', 'marked
77
controllerAs: 'ctrl',
88
require: '^jsChallenge'
99
};
10-
}]);
10+
});

‎client/javascriptcom/services/command.factory.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
angular.module('javascriptcom').factory('jsCommand', ['_', 'jsCommandFactory', function(_, jsCommandFactory) {
2-
return function jsCommand(challenge, successCallback, errorCallback, messages) {
1+
angular.module('javascriptcom').factory('jsCommand', ['_', 'jsCommandFactory', 'jsChallengeProgress', function(_, jsCommandFactory, jsChallengeProgress) {
2+
return function jsCommand(successCallback, errorCallback, messages) {
33
var vm = this;
4-
vm.challenge = challenge;
54
vm.messages = messages;
65

76
function setErrorMessageType(message, fallback) {
@@ -18,12 +17,14 @@ angular.module('javascriptcom').factory('jsCommand', ['_', 'jsCommandFactory', f
1817
vm.handler = function parseCommand(line, report) {
1918
var command = jsCommandFactory(line);
2019

21-
command(vm.challenge, line).then(function(content) {
20+
var challenge = jsChallengeProgress.activeChallenge();
21+
22+
command(challenge, line).then(function(content) {
2223
formatResponse(content, vm, report, 'success')
23-
successCallback(vm.challenge);
24+
successCallback(challenge);
2425
}, function(content) {
2526
formatResponse(content, vm, report)
26-
errorCallback(vm.challenge);
27+
errorCallback(challenge);
2728
});
2829
}
2930

‎client/javascriptcom/services/jsChallengeProgress.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,12 @@ angular.module('javascriptcom').factory('jsChallengeProgress', ['_', function(_)
2323
},
2424

2525
activate: function(challenge) {
26-
if(!challenge.active) {
27-
this.deactivateAll();
26+
if(this.activeChallenge() == challenge) {
27+
return true;
28+
}
29+
30+
this.deactivateAll();
31+
if(challenge && !challenge.active) {
2832
challenge.active = true;
2933
challenge.started = true;
3034
}
@@ -40,6 +44,10 @@ angular.module('javascriptcom').factory('jsChallengeProgress', ['_', function(_)
4044
var challengeIndex = _.findIndex(this.challenges, { active: true });
4145

4246
return challengeIndex+1 == this.challenges.length;
47+
},
48+
49+
activeChallenge: function() {
50+
return _.find(this.challenges, { active: true });
4351
}
4452
}
4553

‎client/stylesheets/application.sass‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,3 +86,14 @@
8686
.animate--fade.ng-leave,
8787
.animate--fade.ng-enter.ng-enter-active
8888
opacity: 1
89+
90+
91+
#im-sure-youll-change-this
92+
position: relative
93+
section
94+
position: absolute
95+
top: 0
96+
height: 500px
97+
98+
.js-console
99+
margin-top: 500px;

‎gulpfile.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,12 @@ var options = {
4646
},
4747

4848
js: {
49-
files: ['client/javascripts/application.js', 'client/javascripts/**/*.js'],
49+
files: [
50+
'client/javascripts/application.js',
51+
'client/javascripts/**/*.js',
52+
'client/javascriptcom/app.js',
53+
'client/javascriptcom/**/*.js'
54+
],
5055
vendorFiles: ['bower_components/jquery/dist/jquery.js'],
5156
vendorCourseFiles: [
5257
'bower_components/angular/angular.js',

‎public/templates/challenge.html‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
<section class='row course-challenge' ng-class="{ 'is-active': ctrl.challenge.active, 'is-started': ctrl.challenge.started }">
2-
32
<div id="{{ ctrl.challenge.id }}" class='course-challenge-anchor'></div>
43

54
<div class='cell well well--l well--m--xl'>
65
<div class='g'>
76
<div class='g-b g-b--m--3of4 g-b--l--4of6 pol-1of4--m pol-1of6--l por'>
8-
97
<p class='label label--highlight course-challenge-label'>
108
Challenge {{::ctrl.challenge.id}}
119
</p>
@@ -14,11 +12,7 @@ <h2 class='course-challenge-title h h--1 mbs'>{{::ctrl.challenge.title}}</h2>
1412

1513
<js-instructions></js-instructions>
1614

17-
<p class='tar tcs tss'>Type <code class='bdr paxs'>answer</code> to reveal the answer</p>
18-
1915
<js-messages></js-messages>
20-
<js-console></js-console>
21-
2216
</div>
2317
</div>
2418
</div>

‎public/templates/course.html‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,50 @@
11
<div class='course js-course'>
2-
32
<div class='row'>
43
<div class='cell'>
5-
64
<nav class='course-toc'>
75
<div class='well well--m--xl course-toc-inner'>
86
<ol class='list list--s list--divided list--divided--s checklist tfh js-course--toc'>
97
<li ng-repeat='challenge in ctrl.challenges' ng-class="{ 'is-active': challenge.active, 'is-completed': challenge.completed }" class='list-item checklist-item'>
10-
<a ng-href='#{{challenge.id}}' ng-if='challenge.started' ng-click='ctrl.activateChallenge(challenge)' class='checklist-item-link'>{{ ::challenge.title }}</a>
8+
<a ng-href='#{{challenge.id}}' ng-if='challenge.started' ng-click='ctrl.activateChallenge(challenge)' class='checklist-item-link'>{{ ::challenge.title }}</a>
119
<span ng-if='!challenge.started'>{{ ::challenge.title }}</span>
1210
</li>
11+
12+
<li ng-class="{ 'is-active': ctrl.onWrapupPage(), 'is-completed': ctrl.challengeProgress.courseCompleted }" class='list-item checklist-item'>
13+
<a ng-href='#wrapup' ng-if='ctrl.challengeProgress.courseCompleted' ng-click='ctrl.activateChallenge(null)' class='checklist-item-link'>Wrap Up</a>
14+
<span>Wrap Up</span>
15+
</li>
1316
</ol>
1417
</div>
1518
</nav>
16-
1719
</div>
1820
</div>
1921

20-
<div ng-if='ctrl.challenges.length'>
21-
<js-challenge ng-repeat='challenge in ::ctrl.challenges' challenge='challenge' ng-if='challenge.started' class='animate--fade'>
22+
<div ng-if='ctrl.challenges.length' id='im-sure-youll-change-this'>
23+
<js-challenge ng-repeat='challenge in ::ctrl.challenges' challenge='challenge' ng-if='challenge.active' class='animate--fade'>
2224
</js-challenge>
23-
</div>
2425

25-
<div ng-if='ctrl.challengeProgress.courseCompleted' class='animate--fade' ng-class="{ 'is-active' ctrl.challengeProgress.courseCompleted }">
26-
<div class='row'>
27-
<div class='cell cell--s well well--l well--m--xl'>
28-
<div class="g">
29-
<div class="g-b g-b--m--2of5 mbl">
30-
<img class='thumb mhc' src='http://placehold.it/220x220' />
31-
</div>
26+
<section ng-if='ctrl.onWrapupPage()' class='animate--fade'>
27+
<div class='row'>
28+
<div class='cell cell--s well well--l well--m--xl'>
29+
<div class="g">
30+
<div class="g-b g-b--m--2of5 mbl">
31+
<img class='thumb mhc' src='http://placehold.it/220x220' />
32+
</div>
3233

33-
<div class="g-b g-b--m--3of5">
34-
<h1 class='h h--1'>Congratulations!</h1>
34+
<div class="g-b g-b--m--3of5">
35+
<h1 class='h h--1'>Congratulations!</h1>
3536

36-
<p>You completed Try JavaScript and you earned this shiny new badge! Wow, you must be someone super important and awesome. You’re well on your way to becoming a JavaScript master.</p>
37-
<p class="mbl">Sign in or create an account to claim your badge at Code School where you can continue your learning!</p>
37+
<p>You completed Try JavaScript and you earned this shiny new badge! Wow, you must be someone super important and awesome. You’re well on your way to becoming a JavaScript master.</p>
38+
<p class="mbl">Sign in or create an account to claim your badge at Code School where you can continue your learning!</p>
3839

39-
<a href='https://www.codeschool.com' class='btn db dib--s mbs mrs mrs--s'>Claim Your Badge</a>
40-
<a href='/resources' class='btn db dib--s btn--a--bordered'>Nope, I’m Good</a>
40+
<a href='https://www.codeschool.com' class='btn db dib--s mbs mrs mrs--s'>Claim Your Badge</a>
41+
<a href='/resources' class='btn db dib--s btn--a--bordered'>Nope, I’m Good</a>
42+
</div>
4143
</div>
4244
</div>
4345
</div>
44-
</div>
46+
</section>
4547
</div>
48+
49+
<js-console></js-console>
4650
</div>

0 commit comments

Comments
 (0)