mirror of
https://github.com/neocities/neocities.git
synced 2025-04-25 01:32:36 +02:00
105 lines
2.5 KiB
Text
105 lines
2.5 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">
|
|
<% if request.path =~ /\/html\/9/ %>
|
|
<a href="/tutorial/html/10" class="btn btn-action">Next</a>
|
|
<% else %>
|
|
<input id="submit" class="btn btn-action" type="submit" value="Save">
|
|
<input id="reset" class="btn btn-action" type="submit" value="Reset">
|
|
<% end %>
|
|
<h3>HTML</h3>
|
|
<textarea id="editor" class="editor">
|
|
<html>
|
|
<body>
|
|
|
|
Hello World!
|
|
|
|
</body>
|
|
</html>
|
|
</textarea>
|
|
<div class="error" style="display: none; margin-top: 0">
|
|
<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">
|
|
var infoObj = $('.error')
|
|
|
|
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 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() {
|
|
$('.error').css('display', 'none')
|
|
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>
|