zydronium/neocities
1
0
Fork 0
mirror of https://github.com/neocities/neocities.git synced 2025-04-25 09:42:36 +02:00
Code Issues Projects Releases Packages Wiki Activity

better homework checking for tutorial up to page 6

Browse source
This commit is contained in:
Kyle Drake 2016-04-17 14:33:23 -07:00
parent 322a87b1d0
commit 8c5b9a803d
5 changed files with 67 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
views/tutorial/html/3.erb
View file

@ -4,10 +4,10 @@
<!-- Check out your site at <a href="">victoria.neocities.org</a>. --> <!-- Check out your site at <a href="">victoria.neocities.org</a>. -->
</div> </div>
<div class="dialogue" style="left: 300px; top: 25px; width: 250px"> <div class="dialogue" style="left: 300px; top: 25px; width: 250px">
Let's make your name a heading by putting a <strong>Heading Level 1 tag</strong> around it. Let's make your name a heading by putting the <strong>h1 tag</strong> around it. This helps to visually separate content on your site.
</div> </div>
<div class="dialogue" style="left: 330px; top: 120px; width: 250px"> <div class="dialogue" style="left: 330px; top: 120px; width: 250px">
Change the text to this: <strong><span id="answer"></span></strong> Try using an h1 tag by changing the text to something like this: <strong><span id="answer"></span></strong>
and click save. and click save.
</div> </div>
</div> </div>
@ -29,20 +29,16 @@
</div> </div>
<script> <script>
var answer = '<h1>'+sessionStorage.getItem('name')+"'s Website</h1>"
$('#answer').text(answer) $('#answer').text(answer)
function checkHomework() { function checkHomework() {
var html = editor.getValue() var html = editor.getValue()
var match = '<html.+>.+<body>.+'+answer+'.+</body>.+</html>'
var re = new XRegExp(match, 'gis')
if(html.match(re) === null) { if(!html.match(/<h1>\S.+<\/h1>/)) {
notok("That's not right! Try again.") notok("That doesn't look like a header! Try again.")
} else { } else {
sessionStorage.setItem('tutorialHtml', html) sessionStorage.setItem('tutorialHtml', html)
ok('Great, you did it!', '/tutorial/html/4') ok('Nice header!', '/tutorial/html/4')
} }
} }
</script> </script>

8
views/tutorial/html/4.erb
View file

@ -16,14 +16,12 @@
<script> <script>
function checkHomework() { function checkHomework() {
var html = editor.getValue() var html = editor.getValue()
var match = '<html.+>.+<body>.+<h1>.+</h1>.+<p>.+</p>.+</body>.+</html>'
var re = new XRegExp(match, 'gis')
if(html.match(re) === null) { if(html.match(/<p>\S.+<\/p>/) === null) {
notok("That's not right! Try again.") notok("I don't see a &lt;p&gt;paragraph with text in it&lt;/p&gt; anywhere! Try again.")
} else { } else {
sessionStorage.setItem('tutorialHtml', html) sessionStorage.setItem('tutorialHtml', html)
ok('Great, you did it!', '/tutorial/html/5') ok('Great, nice paragraph!', '/tutorial/html/5')
} }
} }
</script> </script>

47
views/tutorial/html/5.erb
View file

@ -3,9 +3,9 @@
You're writing HTML! You're doing it! Everything you need to know is just another tag! You're writing HTML! You're doing it! Everything you need to know is just another tag!
</div> </div>
<div class="dialogue" style="top: -20px; width: 320px"> <div class="dialogue" style="top: -20px; width: 320px">
<p>For example, links look like this:</p> <p>For example, a link to another site looks like this:</p>
<p><strong>&lt;a href="http://neocities.org"&gt;Check out Neocities!&lt;/a&gt;</strong></p> <p><strong>&lt;a href="//neocities.org"&gt;Check out Neocities!&lt;/a&gt;</strong></p>
<p>Add a link to your favorite site to<br> the end of the paragraph, right<br> before the &lt;/p&gt; closing tag!</p> <p>Add a link to your favorite site to<br> the end of the paragraph, right<br> before the &lt;/p&gt; closing tag!</p>
</div> </div>
@ -15,11 +15,13 @@
<h4>Nesting</h4> <h4>Nesting</h4>
<p>Tags always need to be nested properly, like Russian dolls. So this is okay: <p>Tags always need to be nested properly, like Russian dolls. So this is okay:
<pre> <pre>
<p>Welcome! <a>Link!</a></p> &lt;p&gt;Welcome! &lt;a href="//neocities.org"&gt;Link!&lt;/a&gt;&lt;/p&gt;
</pre>
But this isn't! But this is not correct:
<p>Welcome! <a>Link!</p></a> <pre>
&lt;p&gt;Welcome! &lt;a href="//neocities.org"&gt;Link!&lt;/p&gt;&lt;/a&gt;
</pre> </pre>
</p> </p>
</div> </div>
@ -31,11 +33,36 @@ But this isn't!
var match = '<html.+>.+<body>.+<h1>.+</h1>.+<p>.+<a.+href=".+">.+</a>[^.+]?</p>.+</body>.+</html>' var match = '<html.+>.+<body>.+<h1>.+</h1>.+<p>.+<a.+href=".+">.+</a>[^.+]?</p>.+</body>.+</html>'
var re = new XRegExp(match, 'gis') var re = new XRegExp(match, 'gis')
if(html.match(re) === null) { var p = preview().find('p')
notok("That's not right! Try again.")
} else { if(p.length == 0) {
sessionStorage.setItem('tutorialHtml', html) notok("Couldn't find a paragraph! Did you accidentally delete it? Add it back or click the reset button to start over.")
ok('Great, you did it!', '/tutorial/html/6') return
} }
var a = p.find('a')
if(a.length == 0) {
notok("Couldn't find an &lt;a&gt; link in your paragraph, try to add it inside the paragraph.")
return
}
if(a.attr('href') === undefined) {
notok("Your a tag is missing an href attribute. Try writing it like this: &lt;a href=\"//neocities.org\"&gt; and don't forget the closing &lt;a&gt; tag!")
return
}
if(a.attr('href') == '' || a.attr('href').match(/\s+/)) {
notok('You need to add a url to the <strong>href</strong>, like this: href="//neocities.org"')
return
}
if(a.text() == '' || a.text().match(/\s+/)) {
notok('You need to add a name for your link, which is the text between the &lt;a&gt; tag, and the closing tag &lt;/a&gt;')
return
}
sessionStorage.setItem('tutorialHtml', html)
ok('Great, nice link!', '/tutorial/html/6')
} }
</script> </script>

23
views/tutorial/html/6.erb
View file

@ -27,14 +27,25 @@
var html = editor.getValue() var html = editor.getValue()
/* TODO: Make .+ ignore any spaces or newlines or whatever. </a> lol </p> is fine too. */ /* TODO: Make .+ ignore any spaces or newlines or whatever. </a> lol </p> is fine too. */
var match = '<html.+>.+<body>.+<img.+src="/cat.png">.+</body>.+</html>'
var re = new XRegExp(match, 'gis')
if(html.match(re) === null) { var img = preview().find('img')
notok("That's not right! Try again.")
} else { if(img.length == 0) {
notok("I couldn't find the &lt;img src=\"/cat.png\"&gt; tag, try again!")
return
}
if(img.attr('src') === undefined) {
notok("There's no src=\"/cat.png\" in the &lt;img&gt; tag, try adding that.")
return
}
if(img.attr('src') == '' || img.attr('src').match(/\s+/)) {
notok("The src attribute in the &lt;img&gt; tag can't be empty, try it like this: src=\"/cat.png\"")
return
}
sessionStorage.setItem('tutorialHtml', html) sessionStorage.setItem('tutorialHtml', html)
ok('Great, you did it!', '/tutorial/html/7') ok('Great, you did it!', '/tutorial/html/7')
} }
}
</script> </script>

4
views/tutorial/layout.erb
View file

@ -138,5 +138,9 @@
refreshIframe() refreshIframe()
}) })
function preview() {
return $('.tutorial iframe').contents()
}
</script> </script>
<script src="/js/xregexp-min.js"></script> <script src="/js/xregexp-min.js"></script>