diff --git a/views/tutorial/html/3.erb b/views/tutorial/html/3.erb index 5735fd9f..1bab4152 100644 --- a/views/tutorial/html/3.erb +++ b/views/tutorial/html/3.erb @@ -4,10 +4,10 @@
- Let's make your name a heading by putting a Heading Level 1 tag around it. + Let's make your name a heading by putting the h1 tag around it. This helps to visually separate content on your site.
- Change the text to this: + Try using an h1 tag by changing the text to something like this: and click save.
@@ -29,20 +29,16 @@ diff --git a/views/tutorial/html/4.erb b/views/tutorial/html/4.erb index f2d192b6..91bd6b70 100644 --- a/views/tutorial/html/4.erb +++ b/views/tutorial/html/4.erb @@ -16,14 +16,12 @@ diff --git a/views/tutorial/html/5.erb b/views/tutorial/html/5.erb index ad6c7a65..8e0e4d2b 100644 --- a/views/tutorial/html/5.erb +++ b/views/tutorial/html/5.erb @@ -3,9 +3,9 @@ You're writing HTML! You're doing it! Everything you need to know is just another tag!
-

For example, links look like this:

+

For example, a link to another site looks like this:

-

<a href="http://neocities.org">Check out Neocities!</a>

+

<a href="//neocities.org">Check out Neocities!</a>

Add a link to your favorite site to
the end of the paragraph, right
before the </p> closing tag!

@@ -15,11 +15,13 @@

Nesting

Tags always need to be nested properly, like Russian dolls. So this is okay: 

-
Welcome! Link!

+<p>Welcome! <a href="//neocities.org">Link!</a></p>
+
-But this isn't! +But this is not correct: -

Welcome! Link!

+
+<p>Welcome! <a href="//neocities.org">Link!</p></a>

@@ -31,11 +33,36 @@ But this isn't! var match = '.+.+

.+

.+

.+.+[^.+]?

.+.+' var re = new XRegExp(match, 'gis') - if(html.match(re) === null) { - notok("That's not right! Try again.") - } else { - sessionStorage.setItem('tutorialHtml', html) - ok('Great, you did it!', '/tutorial/html/6') + var p = preview().find('p') + + if(p.length == 0) { + notok("Couldn't find a paragraph! Did you accidentally delete it? Add it back or click the reset button to start over.") + return } + + var a = p.find('a') + + if(a.length == 0) { + notok("Couldn't find an <a> 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: <a href=\"//neocities.org\"> and don't forget the closing <a> tag!") + return + } + + if(a.attr('href') == '' || a.attr('href').match(/\s+/)) { + notok('You need to add a url to the href, 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 <a> tag, and the closing tag </a>') + return + } + + sessionStorage.setItem('tutorialHtml', html) + ok('Great, nice link!', '/tutorial/html/6') } diff --git a/views/tutorial/html/6.erb b/views/tutorial/html/6.erb index 773c3064..5a8046b6 100644 --- a/views/tutorial/html/6.erb +++ b/views/tutorial/html/6.erb @@ -27,14 +27,25 @@ var html = editor.getValue() /* TODO: Make .+ ignore any spaces or newlines or whatever. lol

is fine too. */ - var match = '.+.+.+.+' - var re = new XRegExp(match, 'gis') - if(html.match(re) === null) { - notok("That's not right! Try again.") - } else { - sessionStorage.setItem('tutorialHtml', html) - ok('Great, you did it!', '/tutorial/html/7') + var img = preview().find('img') + + if(img.length == 0) { + notok("I couldn't find the <img src=\"/cat.png\"> tag, try again!") + return } + + if(img.attr('src') === undefined) { + notok("There's no src=\"/cat.png\" in the <img> tag, try adding that.") + return + } + + if(img.attr('src') == '' || img.attr('src').match(/\s+/)) { + notok("The src attribute in the <img> tag can't be empty, try it like this: src=\"/cat.png\"") + return + } + + sessionStorage.setItem('tutorialHtml', html) + ok('Great, you did it!', '/tutorial/html/7') } diff --git a/views/tutorial/layout.erb b/views/tutorial/layout.erb index 487e6de2..c699fc3a 100644 --- a/views/tutorial/layout.erb +++ b/views/tutorial/layout.erb @@ -138,5 +138,9 @@ refreshIframe() }) + function preview() { + return $('.tutorial iframe').contents() + } +