neocities/views/tutorial/layout.erb

<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">
      <% if request.path =~ /\/html\/9/ %>
      <div style="float: left">
        <p>Saving your tutorial work will replace anything currently in your <a href="<%= current_site.uri %>/index.html">index.html</a>. If you've modified it before, make sure there isn't anything valuable there before you proceed!</p>
        <a href="/tutorial/html/10" class="btn cancel float-Left">Don't Save</a>
        <a href="#" id="saveToSite" class="btn btn-Action float-Left" style="margin-right: 7px">Save to <%= current_site.username %>.neocities.org</a>
      </div>
      <% else %>
      <input id="submit" class="btn btn-Action" type="submit" value="Save">
      <input id="reset" class="btn cancel" style="margin-right: 7px" type="submit" value="Reset">
      <% end %>
      <h3 class="editor-heading">HTML</h3>

      <div id="editor" class="editor"><%== encoding_fix default_tutorial_html %></div>

        <script src="/js/ace/ace.js" type="text/javascript" charset="utf-8"></script>

        <script>
          $(document).ready(function() {
            editor = ace.edit("editor")
            editor.setTheme('ace/theme/tomorrow_night')
            editor.getSession().setMode("ace/mode/html")
            editor.getSession().setTabSize(2)
            editor.getSession().setUseWrapMode(true)
            editor.setFontSize(14)
            editor.setShowPrintMargin(false)
            editor.setOptions({
              maxLines: Infinity,
              autoScrollEditorIntoView: true
            })

            // Disable autocomplete
            editor.setBehavioursEnabled(false)

            editor.on('change', function(obj) {
              $('.error').css('display', 'none')
              refreshIframe()
            })

            editor.commands.addCommand({
              name: 'saveCommand',
              bindKey: {win: 'Ctrl-S',  mac: 'Command-S'},
              exec: function(editor) {
                $('#submit').click()
              }
            })
          })
        </script>

        <div class="error" style="display: none; margin-top: 0"></div>

        <h3 id="sitePreview">Site Preview</h3>
        <iframe class="preview" style="background: white"></iframe>
      </div>
    </div>

    <% end %>

  </div>
</section>

<script type="text/javascript">
  var infoObj = $('.error')

  String.prototype.tutorialMatches = function(regex, opts) {
    if(!opts)
      var opts = 'gis'

    var result = this.match(new XRegExp(regex, opts))

    if(result == null)
      return false

    return true
  }

  function notok(msg) {
    displayInfo('<i class="fa fa-exclamation-triangle"></i> ' + msg, {
      background: '#93771B'
    })
  }

  function ok(msg, path) {
    displayInfo(msg, {
      background: '#88d128'
    })

    setTimeout(function() {
      window.location.href = path
    }, 1000)
  }

  function displayInfo(html, cssOpts) {
    infoObj.fadeIn('slow')
    infoObj.css(cssOpts)
    infoObj.html(html)
  }

  $('.tutorial #submit').on('click', function() {
    var result = checkHomework()
    if(result == true) {
      window.location.href = '/tutorial/<%= @section %>/<%= @page.to_i+1 %>'
    }
  })

  $('.tutorial #reset').on('click', function() {
    var editor = $('#editor')
    editor.val(editor.text())
  })

  var tutorialHtml = sessionStorage.getItem('tutorialHtml')
  if(tutorialHtml)
    $('#editor').text(tutorialHtml)

  function refreshIframe() {
    if(typeof editor !== 'undefined')
      $('.tutorial iframe').contents().find('html').html(editor.getValue())
  }

  $(function() {
    refreshIframe()
  })

  function preview() {
    return $('.tutorial iframe').contents()
  }

</script>
<script src="/js/xregexp-min.js"></script>