wire dialog display

views/tutorial/html/1.erb

@@ -17,16 +17,18 @@
   </div>
 </div>
 
-<div class="comic" style="height: 300px; background-image: url(/img/tutorial/ch1pg1_2.png);background-size: 839px;">
+<div class="nextPanel" style="display: none">
+  <div class="comic" style="height: 300px; background-image: url(/img/tutorial/ch1pg1_2.png);background-size: 839px;">
     <div class="dialogue" style="left: 200px; top:30px;">
       Welcome, [NAME]! You're about to embark on a very exciting challenge: creating your first website!
     </div>
     <div class="dialogue" style="left: 640px; top:20px;">
       You've already made the first important step of starting this lesson, so here's a badge for your profile.
     </div>
-</div>
+  </div>
 
-<a href="./2">Next >></a>
+  <a href="/tutorial/html/2">Next >></a>
+</div>
 
 <script>
   $('#checkButton').on('click', function(button) {
@@ -38,7 +40,9 @@
       alert("I need to know your name!")
     else {
       sessionStorage.setItem('name', name)
-      window.location.href = '/tutorial/html/2'
+      var dialogueObj = $('.nextPanel .comic .dialogue')[0]
+      dialogueObj.innerHTML = dialogueObj.innerHTML.replace('[NAME]', name)
+      $('.nextPanel').css('display', 'block')
     }
   }
 </script>

views/tutorial/html/2.erb

@@ -31,11 +31,11 @@
     var re = new XRegExp(match, 'gis')
 
     if(html.match(re) === null) {
-      alert("That's not right! Try again.")
+      notok("That's not right! Try again.")
     } else {
-      alert('Great, you did it!')
       sessionStorage.setItem('tutorialHtml', html)
-      window.location.href = '/tutorial/html/3'
+      ok('Great, you did it!', '/tutorial/html/3')
+
     }
   }
 </script>

views/tutorial/html/3.erb

@@ -39,11 +39,10 @@
     var re = new XRegExp(match, 'gis')
 
     if(html.match(re) === null) {
-      alert("That's not right! Try again.")
+      notok("That's not right! Try again.")
     } else {
-      alert('Great, you did it!')
       sessionStorage.setItem('tutorialHtml', html)
-      window.location.href = '/tutorial/html/4'
+      ok('Great, you did it!', '/tutorial/html/4')
     }
   }
 </script>

views/tutorial/html/4.erb

@@ -4,7 +4,7 @@
   </div>
   <div class="dialogue" style="left: 300px; top: 0px">
     To make a paragraph, surround your text with the <strong>&lt;p&gt;</strong> tag. So it should look something like
-    <strong>&lt;p&gt;Hello!&lt;p&gt;</strong>
+    <strong>&lt;p&gt;Hello!&lt;/p&gt;</strong>
   </div>
 </div>
 
@@ -16,11 +16,10 @@
     var re = new XRegExp(match, 'gis')
 
     if(html.match(re) === null) {
-      alert("That's not right! Try again.")
+      notok("That's not right! Try again.")
     } else {
-      alert('Great, you did it!')
       sessionStorage.setItem('tutorialHtml', html)
-      window.location.href = '/tutorial/html/5'
+      ok('Great, you did it!', '/tutorial/html/5')
     }
   }
 </script>

views/tutorial/html/5.erb

@@ -33,11 +33,10 @@ But this isn't!
     var re = new XRegExp(match, 'gis')
 
     if(html.match(re) === null) {
-      alert("That's not right! Try again.")
+      notok("That's not right! Try again.")
     } else {
-      alert('Great, you did it!')
       sessionStorage.setItem('tutorialHtml', html)
-      window.location.href = '/tutorial/html/6'
+      ok('Great, you did it!', '/tutorial/html/6')
     }
   }
 </script>

views/tutorial/html/6.erb

@@ -29,11 +29,10 @@
     var re = new XRegExp(match, 'gis')
 
     if(html.match(re) === null) {
-      alert("That's not right! Try again.")
+      notok("That's not right! Try again.")
     } else {
-      alert('Great, you did it!')
       sessionStorage.setItem('tutorialHtml', html)
-      window.location.href = '/tutorial/html/7'
+      ok('Great, you did it!', '/tutorial/html/7')
     }
   }
 </script>

views/tutorial/html/7.erb

@@ -1,11 +1,13 @@
 <div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg7.png);">
   <div class="dialogue" style="left: 0">
     Now maybe your website needs a list. Here's how an unordered list looks:
-    <ul>
+    <div style="text-align: left; font-weight: bold">
-      <li>websites</li>
+    &lt;ul&gt;<br>
-      <li>yarn</li>
+&nbsp;&nbsp;&lt;li&gt;websites&lt;/li&gt;
-      <li>catnip</li>
+&nbsp;&nbsp;&lt;li&gt;yarn&lt;/li&gt;
-    </ul>
+&nbsp;&nbsp;&lt;li&gt;catnip&lt;/li&gt;<br>
+    &lt;/ul&gt;
+    </div>
   </div>
   <div class="dialogue">
     First, add a list to your page, but replace my favorite activities with your own!
@@ -18,11 +20,13 @@
 <div class="welcome">
   <h4>Lists</h4>
   <p>You can make an ordered (numbered) list like so:</p>
-  <ol>
+  <div style="text-align: left; font-weight: bold">
-  <li>First item</li>
+&lt;ol&gt;<br>
-  <li>Second item</li>
+&nbsp;&nbsp;&lt;li&gt;First item&lt;/li&gt;<br>
-  <li>Third item</li>
+&nbsp;&nbsp;&lt;li&gt;Second item&lt;/li&gt;<br>
-  </ol>
+&nbsp;&nbsp;&lt;li&gt;Third item&lt;/li&gt;<br>
+&lt;/ol&gt;
+  </div>
 </div>
 
 <script>
@@ -34,11 +38,10 @@
     var re = new XRegExp(match, 'gis')
 
     if(html.match(re) === null) {
-      alert("That's not right! Try again.")
+      notok("That's not right! Try again.")
     } else {
-      alert('Great, you did it!')
       sessionStorage.setItem('tutorialHtml', html)
-      window.location.href = '/tutorial/html/8'
+      ok('Great, you did it!', '/tutorial/html/8')
     }
   }
 </script>

views/tutorial/html/8.erb

@@ -1,8 +1,7 @@
 <div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg8.png);">
   <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>
-    <li><a href="http://yarn.com">Yarn</a></li>
   </div>
 </div>
 
@@ -29,11 +28,10 @@
     var re = new XRegExp(match, 'gis')
 
     if(html.match(re) === null) {
-      alert("That's not right! Try again.")
+      notok("That's not right! Try again.")
     } else {
-      alert('Great, you did it!')
       sessionStorage.setItem('tutorialHtml', html)
-      window.location.href = '/tutorial/html/9'
+      ok('Great, you did it!', '/tutorial/html/9')
     }
   }
 </script>

views/tutorial/html/9.erb

@@ -1,9 +1,9 @@
 <div class="comic" style="height: 600px; 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 homepage people see when they visit your site.
+    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>
   <div class="dialogue" style="left: 280px;top: 140px">
-    You can find and edit  index.html by visiting your Neocities dashboard.
+    You can find and edit index.html by visiting your <a href="/dashboard">Neocities dashboard</a>.
   </div>
   <div class="dialogue" style="left: 280px;top: 570px">
     A cheat sheet of all the tags you've learned can be found in the tutorial section.

views/tutorial/layout.erb

@@ -27,7 +27,7 @@
   </body>
 </html>
       </textarea>
-      <div class="error">
+      <div class="error" style="display: none; margin-top: 10px">
         <i class="fa fa-exclamation-triangle"></i> Try again: make sure you change Hello World to something else.
       </div>
 
@@ -42,6 +42,30 @@
 </section>
 
 <script type="text/javascript">
+  var infoObj = $('.error')
+
+  function notok(msg) {
+    displayInfo('<i class="fa fa-exclamation-triangle"></i> ' + msg, {
+      background: '#93771B'
+    })
+  }
+
+  function ok(msg, path) {
+    displayInfo(msg, {
+      background: '#33CC33'
+    })
+
+    setTimeout(function() {
+      window.location.href = path
+    }, 3000)
+  }
+
+  function displayInfo(html, cssOpts) {
+    infoObj.fadeIn('slow')
+    infoObj.css(cssOpts)
+    infoObj.html(html)
+  }
+
   $('.tutorial #submit').on('click', function() {
     var editor = $('#editor')
     var result = checkHomework(editor)
@@ -56,6 +80,7 @@
   })
 
   $('.tutorial textarea').on('keypress keyup', function() {
+    $('.error').css('display', 'none')
     refreshIframe()
   })