gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add a hotkey for advancing to the next challenge

Browse Source
This commit is contained in:
Michael Q Larson
2015-02-06 15:18:02 -08:00
parent a1c5d665e6
commit 319b537e5b
3 changed files with 65 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/js/main.js
View File

@ -36,6 +36,12 @@ $(document).ready(function() {
}
});
$('#complete-courseware-dialog').keydown(function(e) {
if (e.ctrlKey && e.keyCode == 13) {
$('.next-courseware-button').click();
}
});
function completedBonfire(didCompleteWith, bonfireSolution, thisBonfireHash) {

109
seed_data/coursewares.json
View File

@ -5,9 +5,9 @@
"difficulty": "0.00",
"description": [
"Welcome to Free Code Camp's first challenge! Click on the button below for further instructions.",
"Awesome. Now you can read the rest of this challenge's instructions",
"Awesome. Now you can read the rest of this challenge's instructions.",
"You can edit <code>code</code> in <code>text editor</code> we've embedded into this web page.",
"See the code in the text editor that says <code>&#60;h1&#62;hello&#60;/h1&#62;</code>? That's an HTML <code>element</code>.",
"Do you see the code in the text editor that says <code>&#60;h1&#62;hello&#60;/h1&#62;</code>? That's an HTML <code>element</code>.",
"Most HTML elements have an <code>opening tag</code> and a <code>closing tag</code>. Opening tags look like this: <code>&#60;h1&#62;</code>. Closing tags look like this: <code>&#60;/h1&#62;</code>. Note that the only difference between opening and is that closing tags have a slash after their opening angle bracket.",
"To advance to the next exercise, change the h1 tag's text to say \"hello world\" instead of \"hello\"."
],
@ -24,14 +24,14 @@
"name": "Use the h2 Element",
"difficulty" : "0.01",
"description": [
"Add an h2 tag that says \"hello HTML\" to create a second HTML element below the \"hello world\" h1 element.",
"Add an h2 tag that says \"cat photo app\" to create a second HTML element below the \"hello world\" h1 element.",
"The h2 element you enter will create an h2 element on the website.",
"This element tells the browser how to render the text that it contains.",
"h2 elements are slightly smaller than h1 elements. There are also an h3, h4, h5 and h6 elements."
],
"tests": [
"expect($('h1')).to.have.text('hello world');",
"expect($('h2')).to.have.text('hello HTML');"
"expect($('h2')).to.have.text('cat photo app');"
],
"challengeSeed": [
"<h1>hello world</h1>"
@ -73,7 +73,7 @@
"<!--",
"<h1>hello world</h1>",
"",
"<h2>hello html</h2>",
"<h2>cat photo app</h2>",
"",
"<p>hello paragraph</p>"
],
@ -94,20 +94,39 @@
"expect($('p')).to.not.exist;"
],
"challengeSeed": [
"",
"<!--",
"<h1>hello world</h1>",
"",
"<h2>hello html</h2>",
"<h2>cat photo app</h2>",
"",
"<p>hello paragraph</p>",
""
"<p>hello paragraph</p>"
],
"challengeType": 0
},
{
"_id" : "bad87fee1348bd9aedf08833",
"name": "Use Lorem Ipsum Text as a Placeholder",
"difficulty" : "0.05",
"description": [
"Change the text in the p element to use the first few words of lorem ipsum text.",
"Designers use <code>lorem ipsum</code> as placeholder text. It's called lorem ipsum text because it's those are the first two words of a passage by Cicero of Ancient Rome.",
"Lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.",
"Here are the first 25 words of lorem ipsum text: \"lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\""
],
"tests": [
"expect($('p')).to.have.text('lorem ipsum');"
],
"challengeSeed": [
"<h1>hello world</h1>",
"<h2>cat photo app</h2>",
"<p>hello paragraph</p>"
],
"challengeType": 0
},
{
"_id" : "bad87fee1348bd9aedf08803",
"name": "Change the Color of Text",
"difficulty" : "0.05",
"difficulty" : "0.06",
"description": [
"Change the h2 element's color to red.",
"We can do this by changing the <code>style</code> of the h2 element.",
@ -120,14 +139,14 @@
"challengeSeed": [
"<h1>hello world</h1>",
"<h2>hello html</h2>",
"<p>hello paragraph</p>"
"<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
],
"challengeType": 0
},
{
"_id" : "bad87fee1348bd9aedf08805",
"name": "Create a Style Tag for CSS",
"difficulty" : "0.06",
"difficulty" : "0.07",
"description": [
"Create a style tag and write the CSS to make all h2 elements blue.",
"When you entered <code>&#60;h2 style=\"color: red\"&#62;hello html&#60;h2&#62;</code>, you were giving that individual h2 element an <code>inline style</code>",
@ -137,49 +156,54 @@
"Note that it's important to have an <code>opening and closing curly braces</code> (<code>{</code> and <code>}</code>) around each element's style. You also need to make sure your element's style is between the opening and closing style tags. Finally, be sure to add the semicolon to the end of each of the element's styles."
],
"tests": [
"expect($('h2')).to.have.css('color', 'red');"
"expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');"
],
"challengeSeed": [
"<h1>hello world</h1>",
"<h2>hello html</h2>",
"<p>hello paragraph</p>"
"<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
],
"challengeType": 0
},
{
"_id" : "bad87fee1348bd9aedf08806",
"_id" : "bad87fee1348bd9aecf08806",
"name": "Use a CSS Class to Style an Element",
"difficulty" : "0.07",
"difficulty" : "0.08",
"description": [
"Create a CSS class called \"red-text\" and apply it the the h2 element.",
"With CSS, there are hundreds of <code>CSS attributes</code> that you can use to change the way an element looks on a web page.",
"Font size is controlled by the <code >font-size</code> CSS attribute.",
"We've already set the font-size attribute for all h2 elements. See if you can figure out how to give all p elements the font-size of 16 pixels (<code>16px</code>). You can do this inside the same <code>&#60;style&#62;</code> tag that we created for h1."
"With CSS, there are hundreds of <code>CSS attributes</code> that you can use to change the way an element looks on a web page."
],
"tests": [
"expect($('h2')).to.have.css('color', 'red');",
"expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');",
"expect($('h2')).to.have.class('red-text');"
],
"challengeSeed": [
"<h1 class=\"red-text\">hello world</h2>",
"<style>",
" .blue-text {",
" color: blue;",
" }",
"</style>",
"<h1 class=\"red-text\">hello world</h1>",
"<h2>hello html</h2>",
"<p>hello paragraph</p>"
"<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
],
"challengeType": 0
},
{
"_id" : "bad87fee1348bd9aedf08806",
"name": "Use a CSS Classes to Style Multiple Element",
"difficulty" : "0.07",
"_id" : "bad87fee1348bd9aeff08806",
"name": "Use a CSS Classes to Style Multiple Elements",
"difficulty" : "0.09",
"description": [
"Create a CSS class called \"red-text\" and apply it the the h2 element.",
"Apply the \"red-text\" class to the h2 element.",
"With CSS, there are hundreds of <code>CSS attributes</code> that you can use to change the way an element looks on a web page.",
"Font size is controlled by the <code >font-size</code> CSS attribute.",
"We've already set the font-size attribute for all h2 elements. See if you can figure out how to give all p elements the font-size of 16 pixels (<code>16px</code>). You can do this inside the same <code>&#60;style&#62;</code> tag that we created for h1."
],
"tests": [
"expect($('h2')).to.have.css('color', 'red');",
"expect($('h2')).to.have.class('red-text');"
"expect($('h2')).to.have.class('red-text');",
"expect($('h1')).to.have.class('red-text');",
"expect($('h1')).to.have.css('color', 'rgb(255, 0, 0)');",
"expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');"
],
"challengeSeed": [
"<h1 class=\"red-text\">hello world</h2>",
@ -191,7 +215,7 @@
{
"_id" : "bad87fee1348bd9aedf08806",
"name": "Change the Font Size of an Element",
"difficulty" : "0.08",
"difficulty" : "0.10",
"description": [
"Set the font size of all p elements to 16 pixels",
"With CSS, there are hundreds of <code>CSS attributes</code> that you can use to change the way an element looks on a web page.",
@ -219,7 +243,7 @@
{
"_id" : "bad87fee1348bd9aedf08807",
"name": "Import a Google Font",
"difficulty" : "0.09",
"difficulty" : "0.11",
"description": [
"Apply the font-family of Lobster to all h1 elements.",
"The first line of code in your text editor is a <code>call</code> to Google that grabs a font called Lobster and loads it into your HTML.",
@ -250,7 +274,7 @@
{
"_id" : "bad87fee1348bd9aedf08808",
"name": "Help Fonts Gracefully Degrade",
"difficulty" : "0.10",
"difficulty" : "0.12",
"description": [
"Make all h1 elements gracefully degrade to Serif when the Lobster font isn't available."
],
@ -279,7 +303,7 @@
{
"_id" : "bad87fee1348bd9aedf08809",
"name": "Using Important to Override Styles",
"difficulty" : "0.11",
"difficulty" : "0.13",
"description": [
"",
""
@ -296,7 +320,7 @@
{
"_id" : "bad87fee1348bd9aedf08810",
"name": "Use Hex Codes for Precise Colors",
"difficulty" : "0.12",
"difficulty" : "0.14",
"description": [
"",
""
@ -313,7 +337,7 @@
{
"_id" : "bad87fee1348bd9aedf08811",
"name": "Use RGB Codes for Precise Colors",
"difficulty" : "0.12",
"difficulty" : "0.15",
"description": [
"",
""
@ -684,23 +708,6 @@
],
"challengeType": 0
},
{
"_id" : "bad87fee1348bd9aedf08833",
"name": "Use Lorem Ipsum Text as a Placeholder",
"difficulty" : "0.34",
"description": [
"",
""
],
"tests": [
"expect($('h1')).to.have.class('text-center');",
"expect($('h1')).to.have.text('hello world');"
],
"challengeSeed": [
"<h1>hello world</h1>"
],
"challengeType": 0
},
{
"_id" : "bad87fee1348bd9aedf08834",
"name": "Create a Set of Radio Buttons",

2
views/coursewares/show.jade
View File

@ -76,7 +76,7 @@ block content
.animated.zoomInDown.delay-half
span.completion-icon.ion-checkmark-circled.text-primary
- if (cc)
a.animated.fadeIn.btn.btn-lg.btn-primary.btn-block.next-courseware-button(name='_csrf', value=_csrf, aria-hidden='true') Take me to my next challenge
a.animated.fadeIn.btn.btn-lg.btn-primary.btn-block.next-courseware-button(name='_csrf', value=_csrf, aria-hidden='true') Go to my next challenge (ctrl + enter)
- if (points && points > 2)
a.animated.fadeIn.btn.btn-lg.btn-block.btn-twitter(href="https://twitter.com/intent/tweet?text=I%20just%20#{verb}%20%40FreeCodeCamp%20Challenge%20%23#{number}:%20#{name}&url=http%3A%2F%2Ffreecodecamp.com/challenges/#{number}&hashtags=LearnToCode, JavaScript" target="_blank")
i.fa.fa-twitter &nbsp;