Interactive

<!DOCTYPE html><html><head><style>#i{background-color:#fff;}p{text-shadow: 1.3px 0px 1.5px #ff0;}*{font-family:corbel;font-size:1.1em;padding:0.3em;background:#bfb;}</style></head><body>

<div id="i" onclick="document.getElementById('i').innerHTML ='This is designed and developed by Aera23 (Aeron) in June.';">BasicBot: Click the text for more (click this for dev info)</div>

<div id="x">Page 1<br>
<p onclick="document.getElementById('i').innerHTML ='This is a tool that allows users to view part by part help';">What is this</p>

<p onclick="document.getElementById('i').innerHTML ='G\'day. I\'m in the process of being designed';">Hey there, What's up</p>
</div>


<div id="test" style="display:none;">Page 2 of 5:<br>
<p onclick="document.getElementById('i').innerHTML ='My day has been spent by coding an animation tool, then coding this interactive page.';">My day</p>
<p onclick="document.getElementById('i').innerHTML ='The animation was designed to look like a slideshow, however, it only has one \'slide\'.';">Animation</p>

<p onclick="document.getElementById('i').innerHTML ='For work, I did some investing on Plus500, a stock and CFD app. I also did some easy GoFormative questions in Science. In English, I made some animations, and even tried Google Meet.';">Work</p>

<p onclick="document.getElementById('x').innerHTML = document.getElementById('plus').innerHTML">More</p></div>


<div id="plus" style="display:none">
Page 3 of 5<br>
<p onclick="document.getElementById('i').innerHTML ='As usual, I\'ll be in the courtyard, on a bench. I will probably also go to the canteen, to buy some treats for everyone.';">Where will I be?</p>

<p onclick="document.getElementById('i').innerHTML ='If you haven\'t yet used my text tool, feel free to use it :D. I am sure to make more things very soon.';">Where to next?</p>
<p onclick="document.getElementById('x').innerHTML = document.getElementById('end').innerHTML">The fourth page</p>
</div>


<div id="end" style="display:none">
Page 4 of 5<br>
<p onclick="document.getElementById('i').innerHTML ='Well, my favourite music is basically anything by NCS. I also like most songs on the radio, and spend about 10 minutes a day listening to them.';">My favourite music</p>

<p onclick="document.getElementById('i').innerHTML ='No worries :D.<br> BTW, what poems would you like to see?';

document.getElementById('x').innerHTML = document.getElementById('poem').innerHTML;
">Thanks</p>
</div>


<div id="poem" style="display:none">
Page 5 of 5<br>
<p onclick="document.getElementById('i').innerHTML ='I jog and jog,<br>Like a tender hog.<br>And jiggle my log,<br>Without any smog';">Jogging</p>

<p onclick="document.getElementById('i').innerHTML = 'When I feel dumb<br>I suck my thumb<br>But not my bum<br>Coz... I can\'t bend.';
">Silly (double-click)</p>

<noscript onclick="this.innerHTML = 'Ok, see u; dont forget to share this page :D<br>
I am a bot with zero rage<br> And I have never even tried sage!'">Bye</noscript>
And that is that :D
</div>


<span onclick="document.getElementById('x').innerHTML = document.getElementById('test').innerHTML;document.getElementById('i').innerHTML ='OK, back to the second page.';">Start </span>
<span onclick="document.getElementById('x').innerHTML = document.getElementById('poem').innerHTML;document.getElementById('i').innerHTML ='Let\'s get poetic :)';"> End</span>
</body></html>