mirror of
https://github.com/neocities/neocities.git
synced 2025-04-25 01:32:36 +02:00
48 lines
1.8 KiB
Text
48 lines
1.8 KiB
Text
<div class="comic" style="height: 967px; background-image: url(/img/tutorial/ch1pg1.png); background-size: 839px;">
|
|
<div class="dialogue" style="left: 280px; top:370px;">
|
|
Oh, a new student!
|
|
</div>
|
|
<div class="dialogue" style="left: 590px; top:370px;">
|
|
Ahem, please come in!
|
|
</div>
|
|
<div class="dialogue" style="left: 50px; top:635px;">
|
|
I'm Penelope, and I'll be your teacher.
|
|
</div>
|
|
<div class="dialogue" style="left: 500px; top:645px;">
|
|
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 btn-active">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:30px;">
|
|
Welcome, [NAME]! You're about to embark on a very exciting challenge: creating your first website!
|
|
</div>
|
|
<div class="dialogue" style="left: 645px; top:20px;">
|
|
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 btn-active">Next</a>
|
|
</div>
|
|
|
|
<script>
|
|
$('#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>
|