JS Basics Test Breakdown • 5 min read

HTML Hack

• Structures the test
• Includes standard elements like heading, image, and div
• Creation of “Submit” button to see answers (explained in Javascript cell)
• with "answers" ID to display answers

%%html

<h1 id="title">Math Test</h1>
<img alt="math" src="https://www.bwseducationconsulting.com/wp-content/uploads/2020/08/bws-maths-tutoring.jpg" width="250" height="175">
<a href="https://www.youtube.com/watch?v=igcoDFokKzU">If you need help</a>

<div id="Test">
    <label for="addition">15 + 3 =</label>
    <input type="number" id="addition" name="addition">

    <label for="subtraction">15 - 3 =</label>
    <input type="number" id="subtraction" name="subtraction">

    <label for="multiplication">15 x 3 =</label>
    <input type="number" id="multiplication" name="multiplication">
    
    <label for="division">15/3 =</label>
    <input type="number" id="division" name="division">
</div>

<button type="button" onclick="submitResponse()">Submit</button>

<div id="answers"></div>

Javascript Hack including Data Types Hack and DOM Hack

• Javascript formats the submit button function, establishes variables, and stores data
• Number data type:
  • JavaScript variables num15 and num3 are declared with numeric values
  • Arithmetic operations (+, -, *, /) are performed
  • Once “Submit” button is clicked, answers will show in console
• DOM Manipulation:
  • When the “Submit” button is clicked, the submitResponse function is called
  • Inside the function, the numeric results of the arithmetic operations are calculated and stored in variables
  • The document.getElementById is used to access the HTML element with “answers” ID
  • The innerHTML property of the “answers” div is updated with the calculated results
  • Answers are inserted in the HTML as a <p> element

%%javascript

function submitResponse(){
    var num15 = 15
    var num3= 3

    //show answers in console when clicking submit (data types)
        console.log("These are the answers to the test. Please check your responses!")
        console.log("15 + 3 = ")
        console.log(num15 + num3)
        console.log("15 - 3 = ")
        console.log(num15 - num3)
        console.log("15 x 3 = ")
        console.log(num15 * num3)
        console.log("15/3 = ")
        console.log(num15 / num3)

    //Print answers when clicking submit (dom)
        var additionAnswer = num15 + num3;
        var subtractionAnswer = num15 - num3;
        var multiplicationAnswer = num15 * num3;
        var divisionAnswer = num15 / num3;

        var answersDiv = document.getElementById("answers");
        answersDiv.innerHTML = `
            <p>15 + 3 = ${additionAnswer}</p>
            <p>15 - 3 = ${subtractionAnswer}</p>
            <p>15 x 3 = ${multiplicationAnswer}</p>
            <p>15 / 3 = ${divisionAnswer}</p>
            `;   
    }