implement initial code for tutorial

2025-04-24 17:22:35 +02:00 · 2015-10-13 15:59:13 -07:00 · 2015-10-13 15:59:13 -07:00 · d018e9df2d
commit d018e9df2d
parent 6fcc43297b
11 changed files with 162 additions and 28 deletions
--- a/public/cat.png
+++ b/public/cat.png
--- a/public/js/xregexp-min.js
+++ b/public/js/xregexp-min.js
--- a/views/tutorial/html/1.erb
+++ b/views/tutorial/html/1.erb
@ -12,14 +12,22 @@
    What's your name?
  </div>
  <div style="position: absolute; left: 460px; top:840px;">
-    <input type="text" placeholder="First Name" style="position: relative">
-    <a class="btn btn-active">Submit</a>
+    <input id="nameInput" type="text" placeholder="First Name" style="position: relative">
+    <button id="checkButton" class="btn btn-active">Submit</button>
  </div>
 </div>

 <script>
-  function checkHomework(editor) {
-    alert('this checks homework, but its true for now')
-    return true
+  $('#checkButton').on('click', function(button) {
+    checkHomework($('#nameInput').val())
+  })
+
+  function checkHomework(name) {
+    if(name == '' || name == undefined)
+      alert("I need to know your name!")
+    else {
+      sessionStorage.setItem('name', name)
+      window.location.href = '/tutorial/html/2'
+    }
  }
 </script>
--- a/views/tutorial/html/2.erb
+++ b/views/tutorial/html/2.erb
@ -3,7 +3,7 @@
    <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 Hello World with Victoria's Website, and click save!
+    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>
  <div class="dialogue" style="left: 370px; top: 230px;">
    <p>You'll see the results here.</p>
@ -15,14 +15,29 @@

 <div class="welcome">
  <h4>Welcome to HTML!</h4>
-  <p>HTML stands for <strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage. 
+  <p>HTML stands for <strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage.
    Hypertext refers to text that has links, and markup refers to the tags.</p>

  <p>Don't worry if anything seems confusing - you'll get the hang of it once you try coding! If you ever get stuck, click the <strong>Help</strong> link below.</p>
 </div>

 <script>
+  var storedName = sessionStorage.getItem('name')
+  var answer = 'The Website of '+storedName
+  $('#studentName').text(storedName)
+
  function checkHomework(editor) {
-    alert('check homework here')
+    var html = editor.val()
+
+    var match = '<html>.+<body>.+'+answer+'.+</body>.+</html>'
+    var re = new XRegExp(match, 'gis')
+
+    if(html.match(re) === null) {
+      alert("That's not right! Try again.")
+    } else {
+      alert('Great, you did it!')
+      sessionStorage.setItem('tutorialHtml', html)
+      window.location.href = '/tutorial/html/3'
+    }
  }
 </script>
--- a/views/tutorial/html/3.erb
+++ b/views/tutorial/html/3.erb
@ -1,14 +1,14 @@
 <div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg3.png);">
  <div class="dialogue" style="left: 50px; top: 20px;">
-    Great! 
-    Check out your site at <a href="">victoria.neocities.org</a>. 
+    Great!
+    Check out your site at <a href="">victoria.neocities.org</a>.
    You did it!
  </div>
  <div class="dialogue" style="left: 300px; top: 20px; width: 250px">
-    But... hm... it needs a little something more. Let's make your name a heading by putting a Heading Level 1 tag around it. 
+    But... hm... it needs a little something more. Let's make your name a heading by putting a Heading Level 1 tag around it.
  </div>
  <div class="dialogue" style="left: 330px; top: 140px; width: 250px">
-    Change the text to this: [h1]Victoria's Website[/h1]
+    Change the text to this: <strong><span id="answer"></span></strong>
    and click save.
  </div>
 </div>
@ -28,7 +28,22 @@
 </div>

 <script>
+  var answer = '<h1>The website of '+sessionStorage.getItem('name')+'</h1>'
+
+  $('#answer').text(answer)
+
  function checkHomework(editor) {
-    alert('check homework here')
+    var html = editor.val()
+
+    var match = '<html>.+<body>.+'+answer+'.+</body>.+</html>'
+    var re = new XRegExp(match, 'gis')
+
+    if(html.match(re) === null) {
+      alert("That's not right! Try again.")
+    } else {
+      alert('Great, you did it!')
+      sessionStorage.setItem('tutorialHtml', html)
+      window.location.href = '/tutorial/html/4'
+    }
  }
 </script>
--- a/views/tutorial/html/4.erb
+++ b/views/tutorial/html/4.erb
@ -1,15 +1,26 @@
 <div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg4.png);">
  <div class="dialogue">
-    Now let's add a paragraph of text below the heading. Perhaps "Welcome to my website" or your favorite quote.
+    Now let's add a paragraph of text below the heading (h1). Perhaps "Welcome to my website" or your favorite quote.
  </div>
  <div class="dialogue" style="left: 300px; top: 0px">
-    To make a paragraph, surround your text with the [p] tag. So it should look something like 
-    [p]Hello![/p]
+    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>
  </div>
 </div>

 <script>
  function checkHomework(editor) {
-    alert('check homework here')
+    var html = editor.val()
+
+    var match = '<html>.+<body>.+<h1>.+</h1>.+<p>.+</p>.+</body>.+</html>'
+    var re = new XRegExp(match, 'gis')
+
+    if(html.match(re) === null) {
+      alert("That's not right! Try again.")
+    } else {
+      alert('Great, you did it!')
+      sessionStorage.setItem('tutorialHtml', html)
+      window.location.href = '/tutorial/html/5'
+    }
  }
 </script>
--- a/views/tutorial/html/5.erb
+++ b/views/tutorial/html/5.erb
@ -5,9 +5,9 @@
  <div class="dialogue" style="top: -20px; width: 320px">
    <p>For example, links look like this:</p>

-    <p>[a href="http://neocities.org"]Check out Neocities![/a]</p>
-    
-    <p>Add a link to your favorite site to the end of the paragraph, right before the [/p] closing tag!</p>
+    <p><strong>&lt;a href="http://neocities.org"&gt;Check out Neocities!&lt;/a&gt;</strong></p>
+
+    <p>Add a link to your favorite site to the end of the paragraph, right before the &lt;/p&gt; closing tag!</p>
  </div>
 </div>

@ -26,6 +26,18 @@ But this isn't!

 <script>
  function checkHomework(editor) {
-    alert('check homework here')
+    var html = editor.val()
+
+    /* TODO: Make .+ ignore any spaces or newlines or whatever. </a> lol </p> is fine too. */
+    var match = '<html>.+<body>.+<h1>.+</h1>.+<p>.+<a.+href=".+">.+</a>[^.+]?</p>.+</body>.+</html>'
+    var re = new XRegExp(match, 'gis')
+
+    if(html.match(re) === null) {
+      alert("That's not right! Try again.")
+    } else {
+      alert('Great, you did it!')
+      sessionStorage.setItem('tutorialHtml', html)
+      window.location.href = '/tutorial/html/6'
+    }
  }
 </script>
--- a/views/tutorial/html/6.erb
+++ b/views/tutorial/html/6.erb
@ -3,10 +3,10 @@
    Great job! You can see what you've done so far at <a href="">victoria.neocities.org</a>. Now let's try an image.
  </div>
  <div class="dialogue" style="top: 20px; left: 360px">
-    Your Neocities web directory already includes a portrait of me called cat.png.
+    Your Neocities web directory already includes a portrait of me called <strong>cat.png</strong>.
  </div>
  <div class="dialogue" style="top: 140px; left: 390px">
-    Add it to your page like so: [img src="cat.png"]
+    Add it to your page like so: <strong>&lt;img src="/cat.png"&gt;</strong>
  </div>
  <div class="dialogue" style="top: 230px; left: 400px">
    That's it! No closing tag needed for images.
@ -22,6 +22,18 @@

 <script>
  function checkHomework(editor) {
-    alert('check homework here')
+    var html = editor.val()
+
+    /* 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) {
+      alert("That's not right! Try again.")
+    } else {
+      alert('Great, you did it!')
+      sessionStorage.setItem('tutorialHtml', html)
+      window.location.href = '/tutorial/html/7'
+    }
  }
 </script>
--- a/views/tutorial/html/7.erb
+++ b/views/tutorial/html/7.erb
@ -8,7 +8,7 @@
    </ul>
  </div>
  <div class="dialogue">
-    First, add a list to your page, but replace my favorite activities with your own! 
+    First, add a list to your page, but replace my favorite activities with your own!
  </div>
  <div class="dialogue" style="left: 380px; top: 140px;">
    Second, put an h2 header above the list with some kind of title, like "Interests."
@ -27,6 +27,18 @@

 <script>
  function checkHomework(editor) {
-    alert('check homework here')
+    var html = editor.val()
+
+    /* TODO: Make .+ ignore any spaces or newlines or whatever. </a> lol </p> is fine too. */
+    var match = '<html>.+<body>.+<ul>.+<li>.+</li>.+</ul>.+</body>.+</html>'
+    var re = new XRegExp(match, 'gis')
+
+    if(html.match(re) === null) {
+      alert("That's not right! Try again.")
+    } else {
+      alert('Great, you did it!')
+      sessionStorage.setItem('tutorialHtml', html)
+      window.location.href = '/tutorial/html/8'
+    }
  }
 </script>
--- a/views/tutorial/html/8.erb
+++ b/views/tutorial/html/8.erb
@ -22,6 +22,18 @@

 <script>
  function checkHomework(editor) {
-    alert('check homework here')
+    var html = editor.val()
+
+    /* TODO: Make .+ ignore any spaces or newlines or whatever. </a> lol </p> is fine too. */
+    var match = '<html>.+<body>.+<ul>.+<li><a.+href=".+">.+</a></li>.+</ul>.+</body>.+</html>'
+    var re = new XRegExp(match, 'gis')
+
+    if(html.match(re) === null) {
+      alert("That's not right! Try again.")
+    } else {
+      alert('Great, you did it!')
+      sessionStorage.setItem('tutorialHtml', html)
+      window.location.href = '/tutorial/html/9'
+    }
  }
 </script>
--- a/views/tutorial/layout.erb
+++ b/views/tutorial/layout.erb
@ -1,14 +1,22 @@
 <section class="section tutorial">
  <div class="row">
+    <% if request.path =~ /\/html\/10?/ %>
+    <div class="col col-100 lesson">
+    <% else %>
    <div class="col col-60 lesson">
+    <% end %>
      <h1><%= @section.upcase %> Tutorial</h1>
      <h2 class="subtitle">Page <%= @page %>/10</h2>

      <%== erb "tutorial/#{@section}/#{@page}".to_sym, layout: false %>
    </div>

+    <% if request.path =~ /\/html\/10?/ %>
+    <% else %>
+
    <div class="col col-40 interact">
      <input id="submit" class="btn btn-action" type="submit" value="Save">
+      <input id="reset" class="btn btn-action" type="submit" value="Reset">
      <h3>HTML</h3>
      <textarea id="editor" class="editor">
 <html>
@ -21,9 +29,12 @@
      </textarea>

      <h3>Site Preview</h3>
-      <div class="preview">
+      <iframe class="preview" style="background: white"></iframe>
      </div>
    </div>
+
+    <% end %>
+
  </div>
 </section>

@ -35,4 +46,28 @@
      window.location.href = '/tutorial/<%= @section %>/<%= @page.to_i+1 %>'
    }
  })
+
+  $('.tutorial #reset').on('click', function() {
+    var editor = $('#editor')
+    editor.val(editor.text())
+  })
+
+  $('.tutorial textarea').on('keypress keyup', function() {
+    refreshIframe()
+  })
+
+  var tutorialHtml = sessionStorage.getItem('tutorialHtml')
+  if(tutorialHtml)
+    $('#editor').text(tutorialHtml)
+
+  function refreshIframe() {
+    var editor = $('#editor')
+    $('.tutorial iframe').contents().find('html').html(editor.val())
+  }
+
+  $(function() {
+    refreshIframe()
+  })
+
 </script>
+<script src="/js/xregexp-min.js"></script>