<div class="comic" style="height: 967px; background-image: url(/img/tutorial/ch1pg1.png); background-size: 839px;">
  <div class="dialogue" style="left: 275px; top:370px;">
    Oh, a new student!
  </div>
  <div class="dialogue" style="left: 590px; top:368px;">
    Ahem, please come in!
  </div>
  <div class="dialogue" style="left: 38px; top:635px;">
    I'm Penelope, and I'll be your teacher.
  </div>
  <div class="dialogue" style="left: 500px; top:643px;">
    What's your name?
  </div>
  <div style="position: absolute; left: 490px; top:865px;">
    <input id="nameInput" type="text" placeholder="First Name" style="position: relative">
    <button id="checkButton" class="btn-Action" style="margin-top: -5px">Go</button>
  </div>
</div>

<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: 194px; top:27px;">
      Welcome, [NAME]! You're about to embark on a very exciting challenge: creating your first website!
    </div>
    <div class="dialogue" style="left: 645px; top:16px;">
      You've already made the first important step of starting this lesson, so here's a badge for your profile.
    </div>
  </div>

  <a href="/tutorial/html/2" class="btn-Action">Next</a>
</div>

<script>
  sessionStorage.setItem('tutorialHtml', '')
  $('#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)
      var dialogueObj = $('.nextPanel .comic .dialogue')[0]
      dialogueObj.innerHTML = dialogueObj.innerHTML.replace('[NAME]', name)
      $('.nextPanel').css('display', 'block')
    }
  }
</script>
