PickShapeApp 0.3

Correctly works using functions

by arevee

HTML

<div id="showShapes"></div>
<p id="myAnswer"></p>
<h1>Click the <span id="IdShapeTitle"></span></h1>

<p>Score: <span id="score">0</span></p>

<button onclick="btnStartOver()">Start Over</button>

<!-- Not using any more -->
<!-- <button onclick="btnContPlay()">Continue Playing</button>  -->

CSS

#square {
    width: 200px;
    height: 200px;
    background-color: red;
}
#rect {
    width: 400px;
    height: 200px;
    background-color: green;
}

JavaScript

var shapeName = ["Square", "Rectangle"];
var score = 0;

var cssIdSquare = "<div id='square' onclick='sqrClick()'></div>";
var cssIdRec = "<div id='rect'onclick='rectClick()' ></div>";

var docMyAnswer = document.getElementById("myAnswer");
var docMyScore = document.getElementById("score");

var answerCorrect = "CORRECT, Keep Playing!";
var answerWrong = "WRONG! Try Again";

// Random Shape to Select Title
var shapesTitle = shapeName[Math.floor(Math.random() * shapeName.length)];
document.getElementById("IdShapeTitle").innerHTML = shapesTitle.toString();

///// Function Shape Logic
function showAllShapes() {

    ///// Show both shapes
    document.getElementById("showShapes").innerHTML = cssIdSquare + "<br>" + cssIdRec;
}

function sqrClick() {
    if (shapesTitle === "Square") {
        docMyAnswer.innerHTML = answerCorrect;
        score += 1;
        docMyScore.innerHTML = score;
    }
    if (shapesTitle === "Rectangle") {
        docMyAnswer.innerHTML = answerWrong;
    }
    resetShapePlay();
}

function rectClick() {
    if (shapesTitle === "Rectangle") {
        docMyAnswer.innerHTML = answerCorrect;
        score += 1;
        docMyScore.innerHTML = score;
    }
    if (shapesTitle === "Square") {
        docMyAnswer.innerHTML = answerWrong;
    }
    resetShapePlay();
}

showAllShapes();


// Resets Shape Question
function resetShapePlay() {
    shapesTitle = shapeName[Math.floor(Math.random() * shapeName.length)];
    document.getElementById("IdShapeTitle").innerHTML = shapesTitle.toString();
    showAllShapes();
}

// Start Over Button
function btnStartOver() {
    score = 0; // reset score to 0
    document.getElementById("score").innerHTML = score;
    showAllShapes();
    shapesTitle = shapeName[Math.floor(Math.random() * shapeName.length)];
    document.getElementById("IdShapeTitle").innerHTML = shapesTitle.toString();
    document.getElementById("myAnswer").innerHTML = "Starting Over...";
}

///// test code  //////
/*

// Continue Playing...