tutorial error checking adjustments, added refined line art images

views/tutorial/html/1.erb

@@ -8,10 +8,10 @@
   <div class="dialogue" style="left: 50px; top:630px;">
     I'm Penelope, and I'll be your teacher.
   </div>
-  <div class="dialogue" style="left: 330px; top:630px;">
+  <div class="dialogue" style="left: 500px; top:640px;">
     What's your name?
   </div>
-  <div style="position: absolute; left: 460px; top:840px;">
+  <div style="position: absolute; left: 480px; top:850px;">
     <input id="nameInput" type="text" placeholder="First Name" style="position: relative">
     <button id="checkButton" class="btn btn-active">Submit</button>
   </div>

views/tutorial/html/2.erb

@@ -1,11 +1,11 @@
-<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg2.png);">
-  <div class="dialogue" style="left: 25px; top: 25px; width: 250px">
+<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg2.png); background-size: 580px;">
+  <div class="dialogue" style="left: 25px; top: 40px; width: 250px">
     <p>All you need to build your first site is a computer language called HTML.</p><p>HTML is made of tags - there's usually an opening tag and a closing tag, with content in between them.</p>
   </div>
-  <div class="dialogue" style="left: 370px; top: 0px;">
-    And here's some HTML, right in this box! Let's make a change. Replace <strong>Hello World</strong> with <strong>The Website of <span id="studentName"></span></strong>, and click save!
+  <div class="dialogue" style="left: 430px; top: 0px;">
+    And here's some HTML, right in this box! Let's make a change. Replace <strong>Hello World</strong> with <strong><span id="studentName"></span>'s Website</strong>, and click save!
   </div>
-  <div class="dialogue" style="left: 370px; top: 230px;">
+  <div class="dialogue" style="left: 370px; top: 260px;">
     <p>You'll see the results here.</p>
     <p>Make sure to check the green boxes below for important bonus info!</p>
   </div>
@@ -21,7 +21,7 @@
 
 <script>
   var storedName = sessionStorage.getItem('name')
-  var answer = 'The Website of '+storedName
+  var answer = storedName+ "'s Website"
   $('#studentName').text(storedName)
 
   function checkHomework(editor) {

views/tutorial/html/3.erb

@@ -1,4 +1,4 @@
-<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg3.png);">
+<div class="comic" style="height: 500px; background-image: url(/img/tutorial/ch1pg3.png); background-size: 483px;">
   <div class="dialogue" style="left: 50px; top: 20px;">
     Great!
     Check out your site at <a href="">victoria.neocities.org</a>.
@@ -28,7 +28,7 @@
 </div>
 
 <script>
-  var answer = '<h1>The website of '+sessionStorage.getItem('name')+'</h1>'
+  var answer = '<h1>'+sessionStorage.getItem('name')+"'s Website</h1>"
 
   $('#answer').text(answer)
 

views/tutorial/html/4.erb

@@ -1,4 +1,4 @@
-<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg4.png);">
+<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg4.png); background-size: 489px;">
   <div class="dialogue">
     Now let's add a paragraph of text below the heading (h1). Perhaps "Welcome to my website" or your favorite quote.
   </div>

views/tutorial/html/5.erb

@@ -1,4 +1,4 @@
-<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg5.png); margin-top: 3em">
+<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg5.png); margin-top: 3em; background-size: 476px;">
   <div class="dialogue">
     You're writing HTML! You're doing it! Everything you need to know is just another tag!
   </div>

views/tutorial/html/6.erb

@@ -5,10 +5,10 @@
   <div class="dialogue" style="top: 20px; left: 360px">
     Your Neocities web directory already includes a portrait of me called <strong>cat.png</strong>.
   </div>
-  <div class="dialogue" style="top: 140px; left: 390px">
+  <div class="dialogue" style="top: 140px; left: 410px">
     Add it to your page like so: <strong>&lt;img src="/cat.png"&gt;</strong>
   </div>
-  <div class="dialogue" style="top: 230px; left: 400px">
+  <div class="dialogue" style="top: 230px; left: 420px">
     That's it! No closing tag needed for images.
   </div>
 </div>

views/tutorial/html/7.erb

@@ -1,5 +1,5 @@
-<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg7.png);">
-  <div class="dialogue" style="left: 0">
+<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg7.png); background-size: 515px;margin-top:3em">
+  <div class="dialogue" style="left: 0;top:0;">
     Now maybe your website needs a list. Here's how an unordered list looks:
     <div style="text-align: left; font-weight: bold">
     &lt;ul&gt;<br>
@@ -12,7 +12,7 @@
   <div class="dialogue">
     First, add a list to your page, but replace my favorite activities with your own!
   </div>
-  <div class="dialogue" style="left: 380px; top: 140px;">
+  <div class="dialogue" style="left: 440px; top: 140px;">
     Second, put an h2 header above the list with some kind of title, like "Interests."
   </div>
 </div>

views/tutorial/html/8.erb

@@ -1,4 +1,4 @@
-<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg8.png);">
+<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg8.png); background-size: 489px;">
   <div class="dialogue">
     Now add a link to one of your list items. If nested properly, it should look something like this:
 <br><strong>&lt;li&gt;&lt;a href="http://yarn.com"&gt;Yarn&lt;/a&gt;&lt;/li&gt;</strong>

views/tutorial/html/9.erb

@@ -1,4 +1,4 @@
-<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg9.png);">
+<div class="comic" style="height: 650px; background-image: url(/img/tutorial/ch1pg9.png);">
   <div class="dialogue">
     Good work! Everything you've written has been saved to index.html, which is the first web page people see when they <a href="<%= current_site.uri %>">visit your site</a>.
   </div>

views/tutorial/layout.erb

@@ -15,8 +15,12 @@
     <% else %>
 
     <div class="col col-40 interact">
+      <% if request.path =~ /\/html\/9?/ %>
+      <a href="/tutorial/html/10" class="btn btn-action">Next</a>
+      <% else %>
       <input id="submit" class="btn btn-action" type="submit" value="Save">
       <input id="reset" class="btn btn-action" type="submit" value="Reset">
+      <% end %>
       <h3>HTML</h3>
       <textarea id="editor" class="editor">
 <html>
@@ -57,7 +61,7 @@
 
     setTimeout(function() {
       window.location.href = path
-    }, 3000)
+    }, 1000)
   }
 
   function displayInfo(html, cssOpts) {