diff --git a/client/commonFramework.js b/client/commonFramework.js index 6e5bb4f2cf..3a8a0c808a 100644 --- a/client/commonFramework.js +++ b/client/commonFramework.js @@ -1,6 +1,23 @@ -/* globals jailed, CodeMirror, challenge_Id, challenge_Name, challengeType */ +// common namespace +// all classes should be stored here +var common = common || { + // init is an array of functions that are + // called at the beginning of dom ready + init: [] +}; + +common.challengeName = common.challengeName || window.challenge_Name ? + window.challenge_Name : + ''; + +common.challengeType = common.challengeType || window.challengeType ? + window.challengeType : + 0; + +common.challengeId = common.challengeId || window.challenge_Id; + // codeStorage -var codeStorageFactory = (function($, localStorage) { +common.codeStorageFactory = (function($, localStorage) { var CodeStorageProps = { version: 0.01, @@ -68,8 +85,45 @@ var codeStorageFactory = (function($, localStorage) { return codeStorageFactory; }($, localStorage)); -var sandBox = (function() { +common.codeOutput = (function(CodeMirror, document, challengeType) { + if (!CodeMirror) { + return {}; + } + if ( + challengeType === '0' || + challengeType === '7' + ) { + return {}; + } + var codeOutput = CodeMirror.fromTextArea( + document.getElementById('codeOutput'), + { + lineNumbers: false, + mode: 'text', + theme: 'monokai', + readOnly: 'nocursor', + lineWrapping: true + } + ); + codeOutput.setValue( + '/**\n' + + ' * Your output will go here.\n' + + ' * Console.log() -type statements\n' + + ' * will appear in your browser\'s\n' + + ' * DevTools JavaScript console.\n' + + ' */' + ); + + codeOutput.setSize('100%', '100%'); + + return codeOutput; +}(window.CodeMirror, window.document, common.challengeType || 0)); + +var sandBox = (function(jailed, codeOutput) { + if (!jailed) { + return {}; + } var plugin = null; var sandBox = { @@ -150,7 +204,7 @@ var sandBox = (function() { endLoading(); console.log('resetting on fatal plugin error'); - if (challengeType === 0) { + if (common.challengeType === 0) { codeOutput.setValue( 'Sorry, your code is either too slow, has a fatal error, ' + 'or contains an infinite loop.' @@ -163,7 +217,7 @@ var sandBox = (function() { reset(); sandBox.submit = submit; return sandBox; -}()); +}(window.jailed, common.codeOutput)); function replaceSafeTags(value) { return value @@ -180,33 +234,105 @@ var BDDregex = new RegExp( var isInitRun = false; var initPreview = true; -var editor; -editor = CodeMirror.fromTextArea(document.getElementById('codeEditor'), { - lineNumbers: true, - mode: 'text', - theme: 'monokai', - runnable: true, - matchBrackets: true, - autoCloseBrackets: true, - scrollbarStyle: 'null', - lineWrapping: true, - gutters: ['CodeMirror-lint-markers'] -}); +var editor = (function(CodeMirror, emmetCodeMirror, common) { + var codeStorageFactory = common.codeStorageFactory; + if (!CodeMirror) { + return {}; + } -var codeStorage = codeStorageFactory(editor, challenge_Name); -var myCodeMirror = editor; + var editor = CodeMirror.fromTextArea(document.getElementById('codeEditor'), { + lineNumbers: true, + mode: 'text', + theme: 'monokai', + runnable: true, + matchBrackets: true, + autoCloseBrackets: true, + scrollbarStyle: 'null', + lineWrapping: true, + gutters: ['CodeMirror-lint-markers'] + }); + + editor.setSize('100%', 'auto'); + + var codeStorage = common.codeStorage = + codeStorageFactory(editor, common.challengeName); + + editor.on('keyup', function() { + clearTimeout(codeStorage.updateTimeoutId); + codeStorage.updateTimeoutId = setTimeout( + codeStorage.updateStorage.bind(codeStorage), + codeStorage.updateWait + ); + }); + + // Initialize CodeMirror editor with a nice html5 canvas demo. + editor.on('keyup', function() { + clearTimeout(delay); + delay = setTimeout(updatePreview, 300); + }); + + editor.setOption('extraKeys', { + Tab: function(cm) { + if (cm.somethingSelected()) { + cm.indentSelection('add'); + } else { + var spaces = Array(cm.getOption('indentUnit') + 1).join(' '); + cm.replaceSelection(spaces); + } + }, + 'Shift-Tab': function(cm) { + if (cm.somethingSelected()) { + cm.indentSelection('subtract'); + } else { + var spaces = Array(cm.getOption('indentUnit') + 1).join(' '); + cm.replaceSelection(spaces); + } + }, + 'Ctrl-Enter': function() { + isInitRun = false; + bonfireExecute(true); + return false; + } + }); + + + var info = editor.getScrollInfo(); + + var after = editor.charCoords({ + line: editor.getCursor().line + 1, + ch: 0 + }, 'local').top; + + if (info.top + info.clientHeight < after) { + editor.scrollTo(null, after - info.clientHeight + 3); + } + + if (emmetCodeMirror) { + emmetCodeMirror( + editor, + { + 'Cmd-E': 'emmet.expand_abbreviation', + Tab: 'emmet.expand_abbreviation_with_tab', + Enter: 'emmet.insert_formatted_line_break_only' + } + ); + } + common.init.push(function() { + editorValue = codeStorage.isAlive() ? + codeStorage.getStoredValue() : + allSeeds; + + editor.setValue(replaceSafeTags(editorValue)); + editor.refresh(); + }); + + return editor; +}(window.CodeMirror, window.emmetCodeMirror, common)); -editor.on('keyup', function() { - clearTimeout(codeStorage.updateTimeoutId); - codeStorage.updateTimeoutId = setTimeout( - codeStorage.updateStorage.bind(codeStorage), - codeStorage.updateWait - ); -}); var editorValue; -var challengeSeed = challengeSeed || null; +var challengeSeed = challengeSeed || []; var tests = tests || []; var allSeeds = ''; @@ -216,42 +342,6 @@ var allSeeds = ''; }); })(); -if (typeof emmetCodeMirror !== 'undefined') { - var defaultKeymap = { - 'Cmd-E': 'emmet.expand_abbreviation', - 'Tab': 'emmet.expand_abbreviation_with_tab', - 'Enter': 'emmet.insert_formatted_line_break_only' - }; - - emmetCodeMirror(editor, defaultKeymap); -} - -editor.setOption('extraKeys', { - Tab: function(cm) { - if (cm.somethingSelected()) { - cm.indentSelection('add'); - } else { - var spaces = Array(cm.getOption('indentUnit') + 1).join(' '); - cm.replaceSelection(spaces); - } - }, - 'Shift-Tab': function(cm) { - if (cm.somethingSelected()) { - cm.indentSelection('subtract'); - } else { - var spaces = Array(cm.getOption('indentUnit') + 1).join(' '); - cm.replaceSelection(spaces); - } - }, - 'Ctrl-Enter': function() { - isInitRun = false; - bonfireExecute(true); - return false; - } -}); - -editor.setSize('100%', 'auto'); - var libraryIncludes = "" + "" + "" + @@ -294,7 +384,8 @@ function scopejQuery(str) { } function safeHTMLRun(test) { - if (challengeType === '0') { + var codeStorage = common.codeStorage; + if (common.challengeType === '0') { var previewFrame = document.getElementById('preview'); var preview = previewFrame.contentDocument || previewFrame.contentWindow.document; if (editor.getValue().match(/\/gi) !== null) { @@ -304,7 +395,7 @@ function safeHTMLRun(test) { .split(/\<\s?\/\s?script\s?\>/gi)[0]; // add feuxQuery - s = "var document = \"\"; var $ = function() {return(new function() {this.add=function() {return(this);};this.addBack=function() {return(this);};this.addClass=function() {return(this);};this.after=function() {return(this);};this.ajaxComplete=function() {return(this);};this.ajaxError=function() {return(this);};this.ajaxSend=function() {return(this);};this.ajaxStart=function() {return(this);};this.ajaxStop=function() {return(this);};this.ajaxSuccess=function() {return(this);};this.andSelf=function() {return(this);};this.animate=function() {return(this);};this.append=function() {return(this);};this.appendTo=function() {return(this);};this.attr=function() {return(this);};this.before=function() {return(this);};this.bind=function() {return(this);};this.blur=function() {return(this);};this.callbacksadd=function() {return(this);};this.callbacksdisable=function() {return(this);};this.callbacksdisabled=function() {return(this);};this.callbacksempty=function() {return(this);};this.callbacksfire=function() {return(this);};this.callbacksfired=function() {return(this);};this.callbacksfireWith=function() {return(this);};this.callbackshas=function() {return(this);};this.callbackslock=function() {return(this);};this.callbackslocked=function() {return(this);};this.callbacksremove=function() {return(this);};this.change=function() {return(this);};this.children=function() {return(this);};this.clearQueue=function() {return(this);};this.click=function() {return(this);};this.clone=function() {return(this);};this.closest=function() {return(this);};this.contents=function() {return(this);};this.context=function() {return(this);};this.css=function() {return(this);};this.data=function() {return(this);};this.dblclick=function() {return(this);};this.delay=function() {return(this);};this.delegate=function() {return(this);};this.dequeue=function() {return(this);};this.detach=function() {return(this);};this.die=function() {return(this);};this.each=function() {return(this);};this.empty=function() {return(this);};this.end=function() {return(this);};this.eq=function() {return(this);};this.error=function() {return(this);};this.fadeIn=function() {return(this);};this.fadeOut=function() {return(this);};this.fadeTo=function() {return(this);};this.fadeToggle=function() {return(this);};this.filter=function() {return(this);};this.find=function() {return(this);};this.finish=function() {return(this);};this.first=function() {return(this);};this.focus=function() {return(this);};this.focusin=function() {return(this);};this.focusout=function() {return(this);};this.get=function() {return(this);};this.has=function() {return(this);};this.hasClass=function() {return(this);};this.height=function() {return(this);};this.hide=function() {return(this);};this.hover=function() {return(this);};this.html=function() {return(this);};this.index=function() {return(this);};this.innerHeight=function() {return(this);};this.innerWidth=function() {return(this);};this.insertAfter=function() {return(this);};this.insertBefore=function() {return(this);};this.is=function() {return(this);};this.jQuery=function() {return(this);};this.jquery=function() {return(this);};this.keydown=function() {return(this);};this.keypress=function() {return(this);};this.keyup=function() {return(this);};this.last=function() {return(this);};this.length=function() {return(this);};this.live=function() {return(this);};this.load=function() {return(this);};this.load=function() {return(this);};this.map=function() {return(this);};this.mousedown=function() {return(this);};this.mouseenter=function() {return(this);};this.mouseleave=function() {return(this);};this.mousemove=function() {return(this);};this.mouseout=function() {return(this);};this.mouseover=function() {return(this);};this.mouseup=function() {return(this);};this.next=function() {return(this);};this.nextAll=function() {return(this);};this.nextUntil=function() {return(this);};this.not=function() {return(this);};this.off=function() {return(this);};this.offset=function() {return(this);};this.offsetParent=function() {return(this);};this.on=function() {return(this);};this.one=function() {return(this);};this.outerHeight=function() {return(this);};this.outerWidth=function() {return(this);};this.parent=function() {return(this);};this.parents=function() {return(this);};this.parentsUntil=function() {return(this);};this.position=function() {return(this);};this.prepend=function() {return(this);};this.prependTo=function() {return(this);};this.prev=function() {return(this);};this.prevAll=function() {return(this);};this.prevUntil=function() {return(this);};this.promise=function() {return(this);};this.prop=function() {return(this);};this.pushStack=function() {return(this);};this.queue=function() {return(this);};this.ready=function() {return(this);};this.remove=function() {return(this);};this.removeAttr=function() {return(this);};this.removeClass=function() {return(this);};this.removeData=function() {return(this);};this.removeProp=function() {return(this);};this.replaceAll=function() {return(this);};this.replaceWith=function() {return(this);};this.resize=function() {return(this);};this.scroll=function() {return(this);};this.scrollLeft=function() {return(this);};this.scrollTop=function() {return(this);};this.select=function() {return(this);};this.selector=function() {return(this);};this.serialize=function() {return(this);};this.serializeArray=function() {return(this);};this.show=function() {return(this);};this.siblings=function() {return(this);};this.size=function() {return(this);};this.slice=function() {return(this);};this.slideDown=function() {return(this);};this.slideToggle=function() {return(this);};this.slideUp=function() {return(this);};this.stop=function() {return(this);};this.submit=function() {return(this);};this.text=function() {return(this);};this.toArray=function() {return(this);};this.toggle=function() {return(this);};this.toggle=function() {return(this);};this.toggleClass=function() {return(this);};this.trigger=function() {return(this);};this.triggerHandler=function() {return(this);};this.unbind=function() {return(this);};this.undelegate=function() {return(this);};this.unload=function() {return(this);};this.unwrap=function() {return(this);};this.val=function() {return(this);};this.width=function() {return(this);};this.wrap=function() {return(this);};this.wrapAll=function() {return(this);};this.wrapInner=function() {return(this);}});};$.ajax=function() {return($);};$.ajaxPrefilter=function() {return($);};$.ajaxSetup=function() {return($);};$.ajaxTransport=function() {return($);};$.boxModel=function() {return($);};$.browser=function() {return($);};$.Callbacks=function() {return($);};$.contains=function() {return($);};$.cssHooks=function() {return($);};$.cssNumber=function() {return($);};$.data=function() {return($);};$.Deferred=function() {return($);};$.dequeue=function() {return($);};$.each=function() {return($);};$.error=function() {return($);};$.extend=function() {return($);};$.fnextend=function() {return($);};$.fxinterval=function() {return($);};$.fxoff=function() {return($);};$.get=function() {return($);};$.getJSON=function() {return($);};$.getScript=function() {return($);};$.globalEval=function() {return($);};$.grep=function() {return($);};$.hasData=function() {return($);};$.holdReady=function() {return($);};$.inArray=function() {return($);};$.isArray=function() {return($);};$.isEmptyObject=function() {return($);};$.isFunction=function() {return($);};$.isNumeric=function() {return($);};$.isPlainObject=function() {return($);};$.isWindow=function() {return($);};$.isXMLDoc=function() {return($);};$.makeArray=function() {return($);};$.map=function() {return($);};$.merge=function() {return($);};$.noConflict=function() {return($);};$.noop=function() {return($);};$.now=function() {return($);};$.param=function() {return($);};$.parseHTML=function() {return($);};$.parseJSON=function() {return($);};$.parseXML=function() {return($);};$.post=function() {return($);};$.proxy=function() {return($);};$.queue=function() {return($);};$.removeData=function() {return($);};$.sub=function() {return($);};$.support=function() {return($);};$.trim=function() {return($);};$.type=function() {return($);};$.unique=function() {return($);};$.when=function() {return($);};$.always=function() {return($);};$.done=function() {return($);};$.fail=function() {return($);};$.isRejected=function() {return($);};$.isResolved=function() {return($);};$.notify=function() {return($);};$.notifyWith=function() {return($);};$.pipe=function() {return($);};$.progress=function() {return($);};$.promise=function() {return($);};$.reject=function() {return($);};$.rejectWith=function() {return($);};$.resolve=function() {return($);};$.resolveWith=function() {return($);};$.state=function() {return($);};$.then=function() {return($);};$.currentTarget=function() {return($);};$.data=function() {return($);};$.delegateTarget=function() {return($);};$.isDefaultPrevented=function() {return($);};$.isImmediatePropagationStopped=function() {return($);};$.isPropagationStopped=function() {return($);};$.metaKey=function() {return($);};$.namespace=function() {return($);};$.pageX=function() {return($);};$.pageY=function() {return($);};$.preventDefault=function() {return($);};$.relatedTarget=function() {return($);};$.result=function() {return($);};$.stopImmediatePropagation=function() {return($);};$.stopPropagation=function() {return($);};$.target=function() {return($);};$.timeStamp=function() {return($);};$.type=function() {return($);};$.which=function() {return($);};" + s; + s = 'var document = \"\"; var $ = function() {return(new function() {this.add=function() {return(this);};this.addBack=function() {return(this);};this.addClass=function() {return(this);};this.after=function() {return(this);};this.ajaxComplete=function() {return(this);};this.ajaxError=function() {return(this);};this.ajaxSend=function() {return(this);};this.ajaxStart=function() {return(this);};this.ajaxStop=function() {return(this);};this.ajaxSuccess=function() {return(this);};this.andSelf=function() {return(this);};this.animate=function() {return(this);};this.append=function() {return(this);};this.appendTo=function() {return(this);};this.attr=function() {return(this);};this.before=function() {return(this);};this.bind=function() {return(this);};this.blur=function() {return(this);};this.callbacksadd=function() {return(this);};this.callbacksdisable=function() {return(this);};this.callbacksdisabled=function() {return(this);};this.callbacksempty=function() {return(this);};this.callbacksfire=function() {return(this);};this.callbacksfired=function() {return(this);};this.callbacksfireWith=function() {return(this);};this.callbackshas=function() {return(this);};this.callbackslock=function() {return(this);};this.callbackslocked=function() {return(this);};this.callbacksremove=function() {return(this);};this.change=function() {return(this);};this.children=function() {return(this);};this.clearQueue=function() {return(this);};this.click=function() {return(this);};this.clone=function() {return(this);};this.closest=function() {return(this);};this.contents=function() {return(this);};this.context=function() {return(this);};this.css=function() {return(this);};this.data=function() {return(this);};this.dblclick=function() {return(this);};this.delay=function() {return(this);};this.delegate=function() {return(this);};this.dequeue=function() {return(this);};this.detach=function() {return(this);};this.die=function() {return(this);};this.each=function() {return(this);};this.empty=function() {return(this);};this.end=function() {return(this);};this.eq=function() {return(this);};this.error=function() {return(this);};this.fadeIn=function() {return(this);};this.fadeOut=function() {return(this);};this.fadeTo=function() {return(this);};this.fadeToggle=function() {return(this);};this.filter=function() {return(this);};this.find=function() {return(this);};this.finish=function() {return(this);};this.first=function() {return(this);};this.focus=function() {return(this);};this.focusin=function() {return(this);};this.focusout=function() {return(this);};this.get=function() {return(this);};this.has=function() {return(this);};this.hasClass=function() {return(this);};this.height=function() {return(this);};this.hide=function() {return(this);};this.hover=function() {return(this);};this.html=function() {return(this);};this.index=function() {return(this);};this.innerHeight=function() {return(this);};this.innerWidth=function() {return(this);};this.insertAfter=function() {return(this);};this.insertBefore=function() {return(this);};this.is=function() {return(this);};this.jQuery=function() {return(this);};this.jquery=function() {return(this);};this.keydown=function() {return(this);};this.keypress=function() {return(this);};this.keyup=function() {return(this);};this.last=function() {return(this);};this.length=function() {return(this);};this.live=function() {return(this);};this.load=function() {return(this);};this.load=function() {return(this);};this.map=function() {return(this);};this.mousedown=function() {return(this);};this.mouseenter=function() {return(this);};this.mouseleave=function() {return(this);};this.mousemove=function() {return(this);};this.mouseout=function() {return(this);};this.mouseover=function() {return(this);};this.mouseup=function() {return(this);};this.next=function() {return(this);};this.nextAll=function() {return(this);};this.nextUntil=function() {return(this);};this.not=function() {return(this);};this.off=function() {return(this);};this.offset=function() {return(this);};this.offsetParent=function() {return(this);};this.on=function() {return(this);};this.one=function() {return(this);};this.outerHeight=function() {return(this);};this.outerWidth=function() {return(this);};this.parent=function() {return(this);};this.parents=function() {return(this);};this.parentsUntil=function() {return(this);};this.position=function() {return(this);};this.prepend=function() {return(this);};this.prependTo=function() {return(this);};this.prev=function() {return(this);};this.prevAll=function() {return(this);};this.prevUntil=function() {return(this);};this.promise=function() {return(this);};this.prop=function() {return(this);};this.pushStack=function() {return(this);};this.queue=function() {return(this);};this.ready=function() {return(this);};this.remove=function() {return(this);};this.removeAttr=function() {return(this);};this.removeClass=function() {return(this);};this.removeData=function() {return(this);};this.removeProp=function() {return(this);};this.replaceAll=function() {return(this);};this.replaceWith=function() {return(this);};this.resize=function() {return(this);};this.scroll=function() {return(this);};this.scrollLeft=function() {return(this);};this.scrollTop=function() {return(this);};this.select=function() {return(this);};this.selector=function() {return(this);};this.serialize=function() {return(this);};this.serializeArray=function() {return(this);};this.show=function() {return(this);};this.siblings=function() {return(this);};this.size=function() {return(this);};this.slice=function() {return(this);};this.slideDown=function() {return(this);};this.slideToggle=function() {return(this);};this.slideUp=function() {return(this);};this.stop=function() {return(this);};this.submit=function() {return(this);};this.text=function() {return(this);};this.toArray=function() {return(this);};this.toggle=function() {return(this);};this.toggle=function() {return(this);};this.toggleClass=function() {return(this);};this.trigger=function() {return(this);};this.triggerHandler=function() {return(this);};this.unbind=function() {return(this);};this.undelegate=function() {return(this);};this.unload=function() {return(this);};this.unwrap=function() {return(this);};this.val=function() {return(this);};this.width=function() {return(this);};this.wrap=function() {return(this);};this.wrapAll=function() {return(this);};this.wrapInner=function() {return(this);}});};$.ajax=function() {return($);};$.ajaxPrefilter=function() {return($);};$.ajaxSetup=function() {return($);};$.ajaxTransport=function() {return($);};$.boxModel=function() {return($);};$.browser=function() {return($);};$.Callbacks=function() {return($);};$.contains=function() {return($);};$.cssHooks=function() {return($);};$.cssNumber=function() {return($);};$.data=function() {return($);};$.Deferred=function() {return($);};$.dequeue=function() {return($);};$.each=function() {return($);};$.error=function() {return($);};$.extend=function() {return($);};$.fnextend=function() {return($);};$.fxinterval=function() {return($);};$.fxoff=function() {return($);};$.get=function() {return($);};$.getJSON=function() {return($);};$.getScript=function() {return($);};$.globalEval=function() {return($);};$.grep=function() {return($);};$.hasData=function() {return($);};$.holdReady=function() {return($);};$.inArray=function() {return($);};$.isArray=function() {return($);};$.isEmptyObject=function() {return($);};$.isFunction=function() {return($);};$.isNumeric=function() {return($);};$.isPlainObject=function() {return($);};$.isWindow=function() {return($);};$.isXMLDoc=function() {return($);};$.makeArray=function() {return($);};$.map=function() {return($);};$.merge=function() {return($);};$.noConflict=function() {return($);};$.noop=function() {return($);};$.now=function() {return($);};$.param=function() {return($);};$.parseHTML=function() {return($);};$.parseJSON=function() {return($);};$.parseXML=function() {return($);};$.post=function() {return($);};$.proxy=function() {return($);};$.queue=function() {return($);};$.removeData=function() {return($);};$.sub=function() {return($);};$.support=function() {return($);};$.trim=function() {return($);};$.type=function() {return($);};$.unique=function() {return($);};$.when=function() {return($);};$.always=function() {return($);};$.done=function() {return($);};$.fail=function() {return($);};$.isRejected=function() {return($);};$.isResolved=function() {return($);};$.notify=function() {return($);};$.notifyWith=function() {return($);};$.pipe=function() {return($);};$.progress=function() {return($);};$.promise=function() {return($);};$.reject=function() {return($);};$.rejectWith=function() {return($);};$.resolve=function() {return($);};$.resolveWith=function() {return($);};$.state=function() {return($);};$.then=function() {return($);};$.currentTarget=function() {return($);};$.data=function() {return($);};$.delegateTarget=function() {return($);};$.isDefaultPrevented=function() {return($);};$.isImmediatePropagationStopped=function() {return($);};$.isPropagationStopped=function() {return($);};$.metaKey=function() {return($);};$.namespace=function() {return($);};$.pageX=function() {return($);};$.pageY=function() {return($);};$.preventDefault=function() {return($);};$.relatedTarget=function() {return($);};$.result=function() {return($);};$.stopImmediatePropagation=function() {return($);};$.stopPropagation=function() {return($);};$.target=function() {return($);};$.timeStamp=function() {return($);};$.type=function() {return($);};$.which=function() {return($);};' + s; sandBox.submit(scopejQuery(s), function(cls, message) { if (cls) { @@ -369,17 +460,11 @@ if (typeof prodOrDev !== 'undefined') { 'http://www.freecodecamp.com' : 'http://localhost:3001'; - if (challengeType === '0') { + if (common.challengeType === '0') { setTimeout(updatePreview, 300); } } -// Initialize CodeMirror editor with a nice html5 canvas demo. -editor.on('keyup', function() { - clearTimeout(delay); - delay = setTimeout(updatePreview, 300); -}); - /** * "post" methods */ @@ -437,9 +522,9 @@ function showCompletion() { 'event', 'Challenge', 'solved', - challenge_Name + ', Time: ' + time + ', Attempts: ' + attempts + common.challengeName + ', Time: ' + time + ', Attempts: ' + attempts ); - var bonfireSolution = myCodeMirror.getValue(); + var bonfireSolution = editor.getValue(); var didCompleteWith = $('#completed-with').val() || null; $('#complete-courseware-dialog').modal('show'); @@ -470,16 +555,17 @@ function showCompletion() { $.post( '/completed-bonfire/', { challengeInfo: { - challengeId: challenge_Id, - challengeName: challenge_Name, + challengeId: common.challengeId, + challengeName: common.challengeName, completedWith: didCompleteWith, - challengeType: challengeType, + challengeType: common.challengeType, solution: bonfireSolution } }, function(res) { if (res) { - window.location = '/challenges/next-challenge?id=' + challenge_Id; + window.location = + '/challenges/next-challenge?id=' + common.challengeId; } } ); @@ -490,7 +576,7 @@ var resetEditor = function resetEditor() { editor.setValue(replaceSafeTags(allSeeds)); $('#testSuite').empty(); bonfireExecute(true); - codeStorage.updateStorage(); + common.codeStorage.updateStorage(); }; var attempts = 0; @@ -498,35 +584,6 @@ if (attempts) { attempts = 0; } -if (challengeType !== '0') { - var codeOutput = CodeMirror.fromTextArea( - document.getElementById('codeOutput'), - { - lineNumbers: false, - mode: 'text', - theme: 'monokai', - readOnly: 'nocursor', - lineWrapping: true - } - ); - - codeOutput.setValue('/**\n' + - ' * Your output will go here.\n' + ' * Console.log() -type statements\n' + - ' * will appear in your browser\'s\n' + ' * DevTools JavaScript console.\n' + - ' */'); - codeOutput.setSize('100%', '100%'); -} - -var info = editor.getScrollInfo(); - -var after = editor.charCoords({ - line: editor.getCursor().line + 1, - ch: 0 -}, 'local').top; - -if (info.top + info.clientHeight < after) { - editor.scrollTo(null, after - info.clientHeight + 3); -} var userTests; var testSalt = Math.random(); @@ -605,9 +662,15 @@ var createTestDisplay = function() { } }; -var expect = chai.expect; -var assert = chai.assert; -var should = chai.should(); +(function(win, chai) { + if (!chai) { + return; + } + win.expect = chai.expect; + win.assert = chai.assert; + win.should = chai.should(); + +}(window, window.chai)); var reassembleTest = function(test, data) { @@ -646,9 +709,9 @@ var runTests = function(err, data) { ) { try { if (chaiTestFromJSON) { - /* eslint-disable no-eval */ + /* eslint-disable no-eval, no-unused-vars */ var output = eval(reassembleTest(chaiTestFromJSON, data)); - /* eslint-enable no-eval */ + /* eslint-enable no-eval, no-unused-vars */ } } catch (error) { allTestsPassed = false; @@ -669,19 +732,133 @@ var runTests = function(err, data) { } }; +// step challenge +common.init.push((function() { + var stepClass = '.challenge-step'; + var nextBtnClass = '.challenge-step-btn-next'; + var actionBtnClass = '.challenge-step-btn-action'; + var finishBtnClass = '.challenge-step-btn-finish'; + var submitBtnId = '#challenge-step-btn-submit'; + var submitModalId = '#challenge-step-modal'; + + function getNextStep($challengeSteps) { + var length = $challengeSteps.length; + var $nextStep = false; + var nextStepIndex = 0; + $challengeSteps.each(function(index) { + var $step = $(this); + if ( + !$step.hasClass('hidden') && + index + 1 !== length + ) { + nextStepIndex = index + 1; + } + }); + + $nextStep = $challengeSteps[nextStepIndex]; + + return $nextStep; + } + + function handleNextStepClick(e) { + e.preventDefault(); + var nextStep = getNextStep($(stepClass)); + $(this) + .parent() + .addClass('animated fadeOutLeft') + .delay(700) + .queue(function(next) { + $(this).addClass('hidden'); + if (nextStep) { + $(nextStep) + .removeClass('hidden') + .addClass('animated slideInRight') + .delay(1000) + .queue(function(next) { + $(this).removeClass('slideInRight'); + next(); + }); + } + next(); + }); + + } + + function handleActionClick() { + $(this) + .parent() + .find('.disabled') + .removeClass('disabled'); + } + + function handleFinishClick(e) { + e.preventDefault(); + $(submitModalId).modal('show'); + $(submitModalId + '.modal-header').click(); + $(submitBtnId).click(handleSubmitClick); + } + + function handleSubmitClick(e) { + e.preventDefault(); + + $('#submit-challenge') + .attr('disabled', 'true') + .removeClass('btn-primary') + .addClass('btn-warning disabled'); + + var $checkmarkContainer = $('#checkmark-container'); + $checkmarkContainer.css({ height: $checkmarkContainer.innerHeight() }); + + $('#challenge-checkmark') + .addClass('zoomOutUp') + .delay(1000) + .queue(function(next) { + $(this).replaceWith( + '
' + + 'submitting...
' + ); + next(); + }); + + $.post( + '/completed-bonfire/', { + challengeInfo: { + challengeId: common.challengeId, + challengeName: common.challengeName, + challengeType: common.challengeType + } + }, + function(res) { + if (res) { + window.location = + '/challenges/next-challenge?id=' + common.challengeId; + } + } + ); + } + + return function($) { + $(nextBtnClass).click(handleNextStepClick); + $(actionBtnClass).click(handleActionClick); + $(finishBtnClass).click(handleFinishClick); + }; +}(window.$))); + function bonfireExecute(shouldTest) { + var codeOutput = common.codeOutput; initPreview = false; goodTests = 0; attempts++; - ga('send', 'event', 'Challenge', 'ran-code', challenge_Name); + ga('send', 'event', 'Challenge', 'ran-code', common.challengeName); userTests = null; $('#testSuite').empty(); if ( - challengeType !== '0' && + common.challengeType !== '0' && !editor.getValue().match(/\$\s*?\(\s*?\$\s*?\)/gi) ) { - var userJavaScript = myCodeMirror.getValue(); + var userJavaScript = editor.getValue(); var failedCommentTest = false; // checks if the number of opening comments(/*) matches the number of @@ -701,7 +878,7 @@ function bonfireExecute(shouldTest) { if (userJavaScript.match(/function\s*?\(|function\s+\w+\s*?\(/gi)) { sandBox.submit(userJavaScript, function(cls, message) { if (failedCommentTest) { - myCodeMirror.setValue(myCodeMirror.getValue() + '*/'); + editor.setValue(editor.getValue() + '*/'); console.log('Caught Unfinished Comment'); codeOutput.setValue('Unfinished multi-line comment'); failedCommentTest = false; @@ -726,7 +903,7 @@ function bonfireExecute(shouldTest) { sandBox.submit(userJavaScript, function(cls, message) { if (failedCommentTest) { - myCodeMirror.setValue(myCodeMirror.getValue() + '*/'); + editor.setValue(editor.getValue() + '*/'); console.log('Caught Unfinished Comment'); codeOutput.setValue('Unfinished mulit-line comment'); failedCommentTest = false; @@ -756,7 +933,7 @@ function bonfireExecute(shouldTest) { } if ( !editor.getValue().match(/\$\s*?\(\s*?\$\s*?\)/gi) && - challengeType === '0' + common.challengeType === '0' ) { safeHTMLRun(shouldTest); } else { @@ -776,6 +953,10 @@ $('#submitButton').on('click', function() { $(document).ready(function() { + common.init.forEach(function(init) { + init($); + }); + // init modal keybindings on open $('#complete-courseware-dialog').on('shown.bs.modal', function() { $('#complete-courseware-dialog').keydown(ctrlEnterClickHandler); @@ -789,20 +970,14 @@ $(document).ready(function() { var $preview = $('#preview'); isInitRun = true; - editorValue = codeStorage.isAlive() ? - codeStorage.getStoredValue() : - allSeeds; - - myCodeMirror.setValue(replaceSafeTags(editorValue)); - myCodeMirror.refresh(); - if (typeof $preview.html() !== 'undefined') { $preview.load(function() { if (initPreview) { bonfireExecute(true); } }); - } else { + } else if (common.challengeType !== 7) { bonfireExecute(true); } + }); diff --git a/seed/challenges/basejumps.json b/seed/challenges/basejumps.json index 26f091cbcb..2235eefc58 100644 --- a/seed/challenges/basejumps.json +++ b/seed/challenges/basejumps.json @@ -86,7 +86,7 @@ "Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it.", "If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project.

Click here then add your link to your tweet's text" ], - "type": "basejumps", + "type": "basejump", "challengeType": 4, "tests": [], "nameCn": "", diff --git a/seed/challenges/getting-started.json b/seed/challenges/getting-started.json new file mode 100644 index 0000000000..5ac330c4e3 --- /dev/null +++ b/seed/challenges/getting-started.json @@ -0,0 +1,321 @@ +{ + "name": "Get Started with Free Code Camp", + "order": 0.000, + "challenges": [ + { + "id": "560add10cb82ac38a17513be", + "title": "Learn how Free Code Camp Works", + "difficulty": 0.00, + "challengeSeed": [], + "description": [ + [ + "http://i.imgur.com/RlEk2IF.jpg", + "a picture of Free Code Camp's 4 benefits: Get connected, Learn JavaScript, Build your Portfolio, Help nonprofits", + "Welcome to Free Code Camp. We're an open source community of busy people who learn to code and help nonprofits.", + "" + ], + [ + "http://i.imgur.com/pYsTbjI.jpg", + "a screenshot of our curriculum alongside a screenshot of our chat room.", + "Learning to code is hard. To succeed, you'll need lots of practice and support. That's why we've created a rigorous curriculum and supportive community.", + "" + ], + [ + "http://i.imgur.com/D7Y5luw.jpg", + "A graph of the rate of job growth against growth in computer science degree graduates. There are 1.4 million jobs and only 400 million people to fill them.", + "There are thousands of coding jobs currently going unfilled, and the demand for coders grows every year. If you want a coding job, we can help prepare you to get one.", + "" + ], + [ + "http://i.imgur.com/dLx8nrg.jpg", + "An illustration showing that you will learn HTML5, CSS3, JavaScript, Databases, Git, Node.js, Angular.js and Agile.", + "First you'll work through our rigorous 800-hour curriculum learn technologies like HTML5, Node.js and databases. It's self-paced and 100% free.", + "" + ], + [ + "http://i.imgur.com/q4IjuCL.jpg", + "a screenshot of our Front End Development Certificate", + "About half way through our curriculum, you'll earn a verified Front End Development Certificate. If you can finish our entire curriculum, you'll earn a verified Full Stack Development Certificate.", + "" + ], + [ + "http://i.imgur.com/yXyxbDd.jpg", + "a screen shot of our nonprofit project directory.", + "Then you'll build several real-life projects for nonprofits. By the time you finish, you'll have a portfolio of real apps that people use every day.", + "" + ] + ], + "type": "Waypoint", + "challengeType": 7, + "tests": [], + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [] + }, + { + "id": "560add37cb82ac38a17513bf", + "title": "Create a GitHub Account and Join our Chat Rooms", + "difficulty": 0.01, + "challengeSeed": [], + "description": [ + [ + "http://i.imgur.com/EAR7Lvh.jpg", + "a screenshot of our one of our Gitter chat rooms.", + "Now let's join Free Code Camp's chat rooms. You can come here any time of day to hang out, ask questions, or find another camper to pair program with. First you'll need a GitHub account.", + "" + ], + [ + "http://i.imgur.com/FEImaEN.gif", + "A gif showing you to click the link below to go to GitHub. Fill in the necessary fields and click submit.", + "Create an account with GitHub. Be sure to use your real email address - GitHub will keep this private.", + "https://github.com/join" + ], + [ + "http://i.imgur.com/ALN6zPK.gif", + "A gif showing you how to click the profile image in the upper right hand corner of GitHub. Upload a photo of yourself or you will continue to use the automatically generated pixel art. Then fill in the remaining form fields and click submit.", + "Click the pixel art in the upper right hand corner of GitHub, then choose settings. Upload a picture of yourself. A picture of your face works best. This is how your fellow campers will see you in our chat rooms, so put your best foot forward. You can add your city and your name if you want.", + "https://github.com/settings/profile" + ], + [ + "http://i.imgur.com/OXL3G3n.gif", + "Click the link below to navigate to Free Code Camp's open-source repository. In the upper right hand corner, you can click the \"star\" button to star this repository.", + "Go to Free Code Camp's open-source repository and \"star\" it. \"Starring\" is the GitHub equivalent of \"liking\" something.", + "https://github.com/freecodecamp/freecodecamp" + ], + [ + "http://i.imgur.com/EZHzKCV.gif", + "A gif showing you how to click the link below to go to our chat room and click the \"sign in with GitHub\" button. Then you can click into the text input field and type a message to your fellow campers.", + " Now that you have a GitHub account, you can join our main chat room by logging in with GitHub. Introduce yourself by saying \"Hello world!\". Tell your fellow campers how you found Free Code Camp. Also tell us why you want to learn to code.", + "https://gitter.im/FreeCodeCamp/FreeCodeCamp" + ], + [ + "http://i.imgur.com/Ecs5XAd.gif", + "A gif showing you how you can click the settings button in the upper right hand corner and modify your notification settings.", + "Our chat rooms are extremely active. You should change your settings so you're only notified if someone mentions you.", + "" + ], + [ + "http://i.imgur.com/T0bGJPe.gif", + "A gif showing how you can click on a user profile image to initiate a private message with that user.", + "Please note that all of our chat rooms are visible to the public. If you need to share sensitive information, such as an email address or phone number, do it in a private message.", + "" + ], + [ + "http://i.imgur.com/vDTMJSh.gif", + "A gif showing that you can tab back and forth between challenges and our chat rooms.", + "Keep our chat room open while you work through our challenges. That way, you can ask for help if you get stuck. You can also socialize with other campers when you feel like taking a break.", + "" + ], + [ + "http://i.imgur.com/SLQ27Gr.gif", + "A gif showing how you can click the link below to download a native chat room app for your computer.", + "You can also download the chat room app to your computer or phone.", + "https://gitter.im/apps" + ] + ], + "type": "Waypoint", + "challengeType": 7, + "tests": [], + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [] + }, + { + "id": "560add56cb82ac38a17513c0", + "title": "Configure your Public Profile", + "difficulty": 0.02, + "challengeSeed": [], + "description": [ + [ + "http://i.imgur.com/FkEzbto.gif", + "A gif showing how you can click your profile image in your upper right hand corner to access the account page and connect GitHub.", + "Check out your portfolio page. Click your picture your upper right hand corner. To activate your portfolio page, you'll need to link your GitHub account with Free Code Camp.", + "" + ], + [ + "http://i.imgur.com/WKzEr1q.gif", + "A gif showing how you can access your profile page and hover over different days to see how many brownie points you got on those days.", + "Your portfolio page shows your progress and how many Brownie Points you have. You can get Brownie Points by completing challenges and by helping other campers in our chat rooms. If you get Brownie Points on several days in a row, you'll get a streak.", + "" + ] + ], + "type": "Waypoint", + "challengeType": 7, + "tests": [], + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [] + }, + { + "id": "560add65cb82ac38a17513c1", + "title": "Try our Wiki and Camper News", + "difficulty": 0.03, + "challengeSeed": [], + "description": [ + [ + "http://i.imgur.com/DoOqkNW.gif", + "A gif showing how you can click the \"Wiki\" button in your upper-right corner to access the wiki.", + "Try this: Click the \"Wiki\" button in your upper right hand corner. Our community has contributed lots of useful information to this searchable wiki.", + "" + ], + [ + "http://i.imgur.com/nmSiMy1.gif", + "A gif showing how you can access our Camper News page and click the \"upvote\" button to upvote a story.", + "Click the \"News\" button in your upper right hand corner. You can browse links on Camper News and upvote ones that you enjoy.", + "" + ] + ], + "type": "Waypoint", + "challengeType": 7, + "tests": [], + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [] + }, + { + "id": "560add71cb82ac38a17513c2", + "title": "Join a Campsite in Your City", + "difficulty": 0.04, + "challengeSeed": [], + "description": [ + [ + "http://i.imgur.com/Elb3dfj.jpg", + "A picture of some of our campers meeting in a local cafe. 3 men and 3 women are sitting around a table with laptops out, and are smiling and coding.", + "Our Campsites help you code with campers in your city. You can coordinate study groups or attend local coding events together.", + "" + ], + [ + "http://i.imgur.com/EZHzKCV.gif", + "A gif showing how you can click the link below, find your city on the list of Campsites, then click on the Facebook link for your city and join your city's Facebook group.", + "Find your city on this list, click the \"Facebook\" link, then click the \"Join group\" button to apply to join your city's Facebook group (someone from the campsite should approve you shortly). If your city isn't on this list, scroll to the bottom of the wiki article for instructions for how you can create your city's Campsite.", + "https://github.com/FreeCodeCamp/freecodecamp/wiki/List-of-Free-Code-Camp-city-based-Campsites" + ] + ], + "type": "Waypoint", + "challengeType": 7, + "tests": [], + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [] + }, + { + "id": "560add8ccb82ac38a17513c3", + "title": "Join our Alumni Network and Commit to Your Goal", + "difficulty": 0.05, + "challengeSeed": [], + "description": [ + [ + "http://i.imgur.com/P7qfJXt.gif", + "A gif showing how you can click the link below and fill in the necessary fields to add your Free Code Camp studies to your LinkedIn profile.", + "You can add Free Code Camp to your LinkedIn education background. Set your graduation date as next year. For \"Degree\", type \"Full Stack Web Development\". For \"Field of study\", type \"Computer Software Engineering\". Then click \"Save Changes\".", + "https://www.linkedin.com/profile/edit-education?school=Free+Code+Camp" + ], + [ + "", + "", + "Free Code Camp will always be free. If you want to feel more motivated to earn our certificates faster, we encourage you to instead donate each month to a nonprofit.", + "" + ] + ], + "type": "Waypoint", + "challengeType": 7, + "tests": [], + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [] + }, + { + "id": "560add8ccb82ac38a17513c4", + "title": "Learn What to Do If You Get Stuck", + "difficulty": 0.06, + "challengeSeed": [], + "description": [ + [ + "http://i.imgur.com/EWWZBag.jpg", + "An image with the text \"1. Read the error 2. Search Google 3. Ask for help.", + "Let's cover one last thing before you start working through our challenges: how to get help. Any time you get stuck or don't know what to do next: Read-Search-Ask.", + "" + ], + [ + "http://i.imgur.com/99BfAcK.jpg", + "An image showing jQuery documentation", + "First, read the documentation or error message. A key skill that good coders have is the ability to interpret and then follow instructions.", + "" + ], + [ + "http://i.imgur.com/GxvrsFb.gif", + "A gif showing you how to do an advanced Google search. First, we enter the query \"jquery doesn't run when my page loads\". Then we click search tools button and change the \"Any time\" select box to \"within the last year\". Then we click on a result and read through the article and find our answer.", + "If that didn't help, search Google. Good Google queries take a lot of practice. When you search Google, you usually want to include the language or framework you're using. You also want to limit the results to a recent period.", + "" + ], + [ + "http://i.imgur.com/LZYU7p2.gif", + "A gif showing us following the link below to go to the help chat room and ask \"jquery doesn't run when my page loads\".", + "If that didn't help, ask your friends. If you have trouble, you can ask your fellow campers in our help chat room.", + "https://gitter.im/FreeCodeCamp/Help" + ], + [ + "http://i.imgur.com/WsfzvVo.gif", + "A gif showing us clicking the \"map\" button in our upper right hand corner and browsing our challenge map.", + "Now you're ready to start coding! The \"Map\" button in your upper right hand corner will show you our challenge map. This map shows all our coding challenges. We recommend that you complete these from top to bottom, at a sustainable pace. You can also return to your next challenge by clicking the \"Learn\" button.", + "" + ] + ], + "type": "Waypoint", + "challengeType": 7, + "tests": [], + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [] + } + ] +} diff --git a/server/boot/challenge.js b/server/boot/challenge.js index 4ce4937e67..3846498915 100644 --- a/server/boot/challenge.js +++ b/server/boot/challenge.js @@ -26,7 +26,8 @@ const challengeView = { 2: 'coursewares/showVideo', 3: 'coursewares/showZiplineOrBasejump', 4: 'coursewares/showZiplineOrBasejump', - 5: 'coursewares/showBonfire' + 5: 'coursewares/showBonfire', + 7: 'coursewares/showStep' }; const dasherize = utils.dasherize; @@ -247,6 +248,7 @@ module.exports = function(app) { dashedName: origChallengeName, name: challenge.name, details: challenge.description, + description: challenge.description, tests: challenge.tests, challengeSeed: challenge.challengeSeed, verb: utils.randomVerb(), diff --git a/server/boot/home.js b/server/boot/home.js index d6855a9914..511c9aedf4 100644 --- a/server/boot/home.js +++ b/server/boot/home.js @@ -22,7 +22,7 @@ module.exports = function(app) { function index(req, res) { if (req.user) { - return res.render('resources/get-started', { title: message }); + return res.redirect('/map'); } res.render('home', { title: message }); } diff --git a/server/views/coursewares/getstuff.jade b/server/views/coursewares/getstuff.jade deleted file mode 100644 index 6645059ee2..0000000000 --- a/server/views/coursewares/getstuff.jade +++ /dev/null @@ -1,9 +0,0 @@ -// - Created by nathanleniz on 5/19/15. - -extends ../layout-wide -block content - script. - var stuff = !{JSON.stringify(stuff)}; - var challengeMapWithIds = !{JSON.stringify(stuffWithIds)}; - diff --git a/server/views/coursewares/showStep.jade b/server/views/coursewares/showStep.jade new file mode 100644 index 0000000000..f89d65eda2 --- /dev/null +++ b/server/views/coursewares/showStep.jade @@ -0,0 +1,39 @@ +extends ../layout-wide +block content + .row + .col-md-8.col-md-offset-2 + .jumbotron + for step, index in description + .thumbnail.challenge-step(class=index !== 0 ? 'hidden': '') + img.gif-block.img-center.img-responsive.thumbnail(src='#{step[0]}' alt='#{step[1]}') + .caption + p.large-p= step[2] + if step[3] + a.btn.btn-block.btn-primary.challenge-step-btn-action(href='#{step[3]}' target='_blank') Go To Link + if index + 1 === description.length + .btn.btn-block.btn-primary.challenge-step-btn-finish(id='last' class=step[3] ? 'disabled' : '') Finish challenge + else + .btn.btn-block.btn-primary.challenge-step-btn-next(id='#{index}' class=step[3] ? 'disabled' : '') Go to my next step + #challenge-step-modal.modal(tabindex='-1') + .modal-dialog.animated.fadeIn.fast-animation + .modal-content + .modal-header.challenge-list-header= compliment + a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') × + .modal-body + .text-center + #checkmark-container.row + #challenge-checkmark.animated.zoomInDown.delay-half + span.completion-icon.ion-checkmark-circled.text-primary + .spacer + .row + if (user) + #challenge-step-btn-submit.animated.fadeIn.btn.btn-lg.btn-primary.btn-block Submit and go to my next challenge (ctrl + enter) + else + a.btn.btn-lg.btn-primary.btn-block(href='/challenges/next-challenge?id=' + challengeId) Go to my next challenge + script(src=rev('/js', 'commonFramework.js')) + script. + var common = common || { init: [] }; + common.challengeId = !{JSON.stringify(challengeId)}; + common.challengeName = !{JSON.stringify(name)}; + common.challengeType = 7; + common.dashedName = !{JSON.stringify(dashedName || '')}; diff --git a/server/views/partials/challenge-modals.jade b/server/views/partials/challenge-modals.jade index 746c1a6929..85165c357b 100644 --- a/server/views/partials/challenge-modals.jade +++ b/server/views/partials/challenge-modals.jade @@ -35,5 +35,5 @@ a.btn.btn-lg.btn-primary.btn-block(href='#', data-dismiss='modal', aria-hidden='true') Cancel script. if (typeof localStorage !== 'undefined') { - localStorage.setItem('currentDashedName', dashedName); + localStorage.setItem('currentDashedName', common.dashedName || dashedName || ''); } diff --git a/server/views/resources/get-started.jade b/server/views/resources/get-started.jade deleted file mode 100644 index 8767841a66..0000000000 --- a/server/views/resources/get-started.jade +++ /dev/null @@ -1,173 +0,0 @@ -extends ../layout -block content - .jumbotron - h2.text-center Scroll down and follow along with this 8-minute guide. - br - | It will help you get the most out of Free Code Camp. - - .thumbnail - img.gif-block.img-center.img-responsive.thumbnail(src='http://i.imgur.com/RlEk2IF.jpg' alt="a picture of Free Code Camp's 4 benefits: Get connected, Learn JavaScript, Build your Portfolio, Help nonprofits") - .caption - p.large-p Welcome to Free Code Camp. We're an open source community of busy people who learn to code and build projects for nonprofits. - - .big-spacer - .thumbnail - img.gif-block.img-center.img-responsive(src='http://i.imgur.com/pYsTbjI.jpg' alt='a screenshot of our curriculum alongside a screenshot of our chat room.') - .caption - p.large-p Learning to code is hard. To succeed, you'll need lots of practice and support. That's why we've created a rigorous curriculum and supportive community. - - .big-spacer - .thumbnail - img.gif-block.img-center.img-responsive(src='http://i.imgur.com/D7Y5luw.jpg' alt='A graph of the rate of job growth against growth in computer science degree graduates. There are 1.4 million jobs and only 400 million people to fill them.') - .caption - p.large-p There are thousands of coding jobs currently going unfilled, and the demand for coders grows every year. If you want a coding job, we can help prepare you to get one. - - .big-spacer - .thumbnail - img.gif-block.img-center.img-responsive(src='http://i.imgur.com/dLx8nrg.jpg' alt='An illustration showing that you will learn HTML5, CSS3, JavaScript, Databases, Git, Node.js, Angular.js and Agile.') - .caption - p.large-p During the first 800 hours of Free Code Camp, you'll learn technologies like HTML5, Node.js and databases. - - .big-spacer - .thumbnail - img.gif-block.img-center.img-responsive(src='http://i.imgur.com/yXyxbDd.jpg' alt='a screen shot of our nonprofit project directory.') - .caption - p.large-p During the last 800 hours, you'll build several real-life projects for nonprofits. By the time you finish, you'll have a portfolio of real apps that people use every day. - - .big-spacer - .thumbnail - img.gif-block.img-center.img-responsive(src='http://i.imgur.com/EAR7Lvh.jpg' alt='a screenshot of our one of our Gitter chat rooms.') - .caption - p.large-p Now let's join Free Code Camp's chat rooms. You can come here any time of day to hang out, ask questions, or find another camper to pair program with. First you'll need a GitHub account. - - .big-spacer - .thumbnail - img.gif-block.img-center.img-responsive(src='http://i.imgur.com/FEImaEN.gif' alt='A gif showing you to click the link below to go to GitHub. Fill in the necessary fields and click submit.') - .caption - p.large-p Try this:  - a(href='https://github.com/join' target='_blank') Create an account with GitHub - | . Be sure to use your real email address - GitHub will keep this private. - - .big-spacer - .thumbnail - img.gif-block.img-center.img-responsive(src='http://i.imgur.com/ALN6zPK.gif' alt='A gif showing you how to click the profile image in the upper right hand corner of GitHub. Upload a photo of yourself or you will continue to use the automatically generated pixel art. Then fill in the remaining form fields and click submit.') - .caption - p.large-p Try this:  - | Click the pixel art in the upper right hand corner of GitHub, then choose settings. Upload a picture of yourself. A picture of your face works best. This is how your fellow campers will see you in our chat rooms, so put your best foot forward. You can add your city and your name if you want. - - .big-spacer - .thumbnail - img.gif-block.img-center.img-responsive(src='http://i.imgur.com/OXL3G3n.gif' alt="Click the link below to navigate to Free Code Camp's open-source repository. In the upper right hand corner, you can click the \"star\" button to star this repository.") - .caption - p.large-p Try this:  - a(href='//github.com/freecodecamp/freecodecamp' target='_blank') Go to Free Code Camp's open-source repository - |  and "star" it. "Starring" is the GitHub equivalent of "liking" something. - - .big-spacer - .thumbnail - img.gif-block.img-center.img-responsive(src='http://i.imgur.com/Uuc2Ked.gif' alt='A gif showing you how to click the link below to go to our chat room and click the \"sign in with GitHub\" button. Then you can click into the text input field and type a message to your fellow campers.') - .caption - p.large-p Try this:  - | Now that you have a GitHub account, you can  - a(href='https://gitter.im/FreeCodeCamp/FreeCodeCamp' target='_blank') join our main chat room by logging in with GitHub - | . Introduce yourself by saying "Hello world!". Tell your fellow campers how you found Free Code Camp. Also tell us why you want to learn to code. - - .big-spacer - .thumbnail - img.gif-block.img-center.img-responsive(src='http://i.imgur.com/Ecs5XAd.gif' alt='A gif showing you how you can click the settings button in the upper right hand corner and modify your notification settings.') - .caption - p.large-p Try this:  - | Our chat rooms are extremely active. You should change your settings so you're only notified if someone mentions you. - - .big-spacer - .thumbnail - img.gif-block.img-center.img-responsive(src='http://i.imgur.com/T0bGJPe.gif' alt='A gif showing how you can click on a user profile image to initiate a private message with that user.') - .caption - p.large-p Please note that all of our chat rooms are visible to the public. If you need to share sensitive information, such as an email address or phone number, do it in a private message. - - .big-spacer - .thumbnail - img.gif-block.img-center.img-responsive(src='http://i.imgur.com/vDTMJSh.gif' alt='A gif showing that you can tab back and forth between challenges and our chat rooms.') - .caption - p.large-p Keep our chat room open while you work through our challenges. That way, you can ask for help if you get stuck. You can also socialize with other campers when you feel like taking a break. - - .big-spacer - .thumbnail - img.gif-block.img-center.img-responsive(src='http://i.imgur.com/SLQ27Gr.gif' alt='A gif showing how you can click the link below to download a native chat room app for your computer.') - .caption - p.large-p You can also  - a(href='https://gitter.im/apps' target='_blank') download the chat room app - |  to your computer or phone. - - .big-spacer - .thumbnail - img.gif-block.img-center.img-responsive(src='http://i.imgur.com/FkEzbto.gif' alt='A gif showing how you can click your profile image in your upper right hand corner to access the account page and connect GitHub.') - .caption - p.large-p Try this: Check out your portfolio page. Click your picture your upper right hand corner. To activate your portfolio page, you'll need to link your GitHub account with Free Code Camp. - - .big-spacer - .thumbnail - img.gif-block.img-center.img-responsive(src='http://i.imgur.com/WKzEr1q.gif' alt='A gif showing how you can access your profile page and hover over different days to see how many brownie points you got on those days.') - .caption - p.large-p Your portfolio page shows your progress and how many Brownie Points you have. You can get Brownie Points by completing challenges and by helping other campers in our chat rooms. If you get Brownie Points on several days in a row, you'll get a streak. - - .big-spacer - .thumbnail - img.gif-block.img-center.img-responsive(src='http://i.imgur.com/nmSiMy1.gif' alt='A gif showing how you can access our Camper News page and click the "upvote" button to upvote a story.') - .caption - p.large-p Try this:  - | Click the "News" button in your upper right hand corner. You can browse links on Camper News and upvote ones that you enjoy. - - .big-spacer - .thumbnail - img.gif-block.img-center.img-responsive(src='http://i.imgur.com/Elb3dfj.jpg' alt='A picture of some of our campers meeting in a local cafe. 3 men and 3 women are sitting around a table with laptops out, and are smiling and coding.') - .caption - p.large-p Our Campsites help you code with campers in your city. You can discuss coding and attend local Coffee-n-Code events. - - .big-spacer - .thumbnail - img.gif-block.img-center.img-responsive(src='http://i.imgur.com/tYf8jrI.gif' alt="A gif showing how you can click the link below, find your city on the list of Campsites, then click on the Facebook link for your city and join your city's Facebook group.") - .caption - p.large-p Try this:  - a(href='https://github.com/FreeCodeCamp/freecodecamp/wiki/List-of-Free-Code-Camp-city-based-Campsites' target='_blank') Find your city on this list - | , then click it. Click the "Join group" button to join your city's Campsite. - - .big-spacer - .thumbnail - img.gif-block.img-center.img-responsive(src='http://i.imgur.com/P7qfJXt.gif' alt='A gif showing how you can click the link below and fill in the necessary fields to add your Free Code Camp studies to your LinkedIn profile.') - .caption - p.large-p You can  - a(href='https://www.linkedin.com/profile/edit-education?school=Free+Code+Camp' target='_blank') add Free Code Camp to your LinkedIn education background - | . Set your graduation date as next year. For "Degree", type "Full Stack Web Development". For "Field of study", type "Computer Software Engineering". Then click "Save Changes". - - .big-spacer - .thumbnail - img.gif-block.img-center.img-responsive(src='http://i.imgur.com/EWWZBag.jpg' alt='An image with the text \"1. Read the error 2. Search Google 3. Ask for help.') - .caption - p.large-p Let's cover one last thing before you start working through our challenges: how to get help. Any time you get stuck or don't know what to do next: Read-Search-Ask. - - .big-spacer - .thumbnail - img.gif-block.img-center.img-responsive(src='http://i.imgur.com/99BfAcK.jpg' alt='An image showing jQuery documentation') - .caption - p.large-p First, read the documentation or error message. A key skill that good coders have is the ability to interpret and then follow instructions. - - .big-spacer - .thumbnail - img.gif-block.img-center.img-responsive(src='http://i.imgur.com/GxvrsFb.gif' alt="A gif showing you how to do an advanced Google search. First, we enter the query \"jquery doesn't run when my page loads\". Then we click search tools button and change the \"Any time\" select box to \"within the last year\". Then we click on a result and read through the article and find our answer.") - .caption - p.large-p If that didn't help, search Google. Good Google queries take a lot of practice. When you search Google, you usually want to include the language or framework you're using. You also want to limit the results to a recent period. - - .big-spacer - .thumbnail - img.gif-block.img-center.img-responsive(src='http://i.imgur.com/LZYU7p2.gif' alt="A gif showing us following the link below to go to the help chat room and ask \"jquery doesn't run when my page loads\".") - .caption - p.large-p If that didn't help, ask your friends. If you have trouble, you can ask your fellow campers in our  - a(href='https://gitter.im/FreeCodeCamp/Help' target='_blank') help chat room - | . - - .big-spacer - .thumbnail - img.gif-block.img-center.img-responsive(src='http://i.imgur.com/WsfzvVo.gif' alt='A gif showing us clicking the \"map\" button in our upper right hand corner and browsing our challenge map.') - .caption - p.large-p Now you're ready to start coding! Click the "Map" button in your upper right hand corner. Our map shows all our coding challenges. We recommend that you complete these from top to bottom, at a sustainable pace. diff --git a/server/views/resources/jobs-form.jade b/server/views/resources/jobs-form.jade deleted file mode 100644 index f7a693ca17..0000000000 --- a/server/views/resources/jobs-form.jade +++ /dev/null @@ -1,3 +0,0 @@ -extends ../layout -block content - iframe(src="https://docs.google.com/forms/d/1b8JYvQ5ibdwwC0owQ9e9EMRlg22O2wbJgqMvPjiILqs/viewform?embedded=true", frameborder="0", marginheight="0", marginwidth="0", width='102%', height=2100, scrolling="no") Loading...