HTML/CSS - I'm Reading Your Mind Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html id="html">
    <head>
        <meta charset=UTF-8>
        <meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=4">
        <title>Read Your Mind</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
    </head>
    <body id="body">
        <div id="info">
            <h3>READING YOUR MIND TEST</h3>
            <p>CHOOSE A RANDOM NUMBER<br>
            BETWEEN 0 — INFINITE<br>
            KEEP IT IN YOUR MIND<br>
            AND DO SOME INSTRUCTIONS<br>
            I WILL READ IT<br><br>
            <b>NOTE:</b> READ CAREFULLY<br><br>
            <b>INFO:</b> THIS CODE READ THE RESULT OF<br>
            THE CALCULATIONS NOT THE<br>
            NUMBER YOU HAVE CHOSE</p>
            <button id="play">PLAY</button>
        </div>
        
        <div id="Step1" class="none">
            <h4>STEP 1</h4>
            <p id="S1"></p>
            <button id="nextS2">NEXT STEP</button>
        </div>

css

* {
    text-align: center;
    font-family: arial;
}
html, body {
    margin: 0;
    padding: 6px;
    padding-top: 2px;
    background:  #eee;
}
.none {
    display: none;
    border: 6px solid  rgba(255,255,255,0.5);
    box-shadow: inset 0px 0px 6px 3px  rgba(0,0,0,0.5);
    height: 225px;
    color:  #fff;
}
.none * {
    animation: side 700ms;
    position: relative;
}
@keyframes side {
    0% { left: -999px; opacity: 0; }
    70% { opacity: 0; }

alert("Some mispelled word changed into the correct one");
window.onload = function() {
        // text of steps for the tricks
    step1 = [
                "FIRST, ADD THE NUMBER YOU HAVE CHOSE BY 18<br><br>[A NUMBER YOU HAVE CHOSE] + 18",
                "FIRST, MULTIPLY THE NUMBER YOU HAVE CHOSE BY 2<br><br>[A NUMBER YOU HAVE CHOSE] * 2",
                "FIRST, ADD THE NUMBER YOU HAVE CHOSE BY 20<br><br>[A NUMBER YOU HAVE CHOSE] + 20",
                "FIRST, ADD THE NUMBER YOU HAVE CHOSE BY 13<br><br>[A NUMBER YOU HAVE CHOSE] + 13"
            ];
    
    step2 = [
                "THEN, SUBSTRACT THE RESULT OF STEP BEFORE BY 3<br><br>[RESULT OF STEP 1] - 3",
                "THEN, ADD THE RESULT OF STEP BEFORE BY 6<br><br>[RESULT OF STEP 1] + 6",
                "THEN, SUBSTRACT THE RESULT OF STEP BEFORE BY 8<br><br>[RESULT OF STEP 1] - 8",
                "THEN, ADD THE RESULT OF STEP BEFORE BY 2<br><br>[RESULT OF STEP 1] + 2"
            ];
    
    step3 = [
                "THEN, SUBSTRACT THE RESULT OF STEP BEFORE BY 5<br><br>[RESULT OF STEP 2] - 5",
                "THEN, DIVIDE THE RESULT OF STEP BEFORE BY 2<br><br>[RESULT OF STEP 2] / 2",
                "THEN, ADD THE RESULT OF STEP BEFORE BY 4<br><br>[RESULT OF STEP 2] + 4",
                "THEN, SUBSTRACT THE RESULT OF STEP BEFORE BY 4<br><br>[RESULT OF STEP 2] - 4"
            ];
            
    step4 = [
                "THEN, SUBSTRACT THE RESULT<br>OF STEP BEFORE BY NUMBER<br>YOU HAVE CHOSE FIRST<br><br>[RESULT OF STEP 3] -<br>[A NUMBER YOU HAVE CHOSE]",
                "THEN, SUBSTRACT THE RESULT<br>OF STEP BEFORE BY NUMBER<br>YOU HAVE CHOSE FIRST<br><br>[RESULT OF STEP 3] -<br>[A NUMBER YOU HAVE CHOSE]",

BROWSER

Console