mirror of
https://github.com/neocities/neocities.git
synced 2025-04-25 01:32:36 +02:00
76 lines
1.8 KiB
Text
76 lines
1.8 KiB
Text
<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>
|
|
<body>
|
|
|
|
Hello World!
|
|
|
|
</body>
|
|
</html>
|
|
</textarea>
|
|
<div class="error">
|
|
<i class="fa fa-exclamation-triangle"></i> Try again: make sure you change Hello World to something else.
|
|
</div>
|
|
|
|
<h3>Site Preview</h3>
|
|
<iframe class="preview" style="background: white"></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<% end %>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<script type="text/javascript">
|
|
$('.tutorial #submit').on('click', function() {
|
|
var editor = $('#editor')
|
|
var result = checkHomework(editor)
|
|
if(result == true) {
|
|
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>
|