Блог

 var Counter = {
    PlayingState: null,
    IsStoped: true,
    Score: 0,
    TimeRemaining: 0,
    FirstNumber: 0,
    SecondNumber: 0,
    CorrectAnswer: 0,
    CorrectPosition: 0,
    WrongAnswer: 0,
    AddContentToElement: function(selector, content)
    {
        document.querySelector(selector).innerHTML = content;
    },
    ChangeStyle: function(selector, property, value)
    {
        document.querySelector(selector).setAttribute(property, value);
    },
    Initialize: function(timeRemaining)
    {
        this.TimeRemaining = timeRemaining;
    },
    GenerateRandomNumber: function(multiplier)
    {
        return Math.round( Math.random() * multiplier )   1;
    },
    Refresh: function(selector, data)
    {
        document.querySelector(selector).innerText = (data < 10 ? "0" : "")   data;
    },
    LoopThroughElements: function()
    {
        var answers = [this.CorrectAnswer];

        for (var index = 1; index < 5; index  )
        {
            this.ChangeStyle("ul#choices > li:nth-of-type("   index   ")", "style", "height:auto;");

            if (index !== this.CorrectAnswer)
            {
                do
                {
                    this.WrongAnswer = this.GenerateRandomNumber(9) * this.GenerateRandomNumber(9);
                } while ( answers.indexOf(this.WrongAnswer) > -1 );

                this.AddContentToElement( "ul#choices > li:nth-of-type("   index   ")", this.WrongAnswer );
                answers.push(this.WrongAnswer);
            }
        }
    },
    Launch: function()
    {
        this.IsStoped = false;
        this.Action();
        this.ChangeStyle("aside#time-remaining", "style", "visibility:visible;");
        this.ChangeStyle("#game-over", "style", "display:none;");
        this.ChangeStyle("ul#choices", "style", "pointer-events:initial; opacity:1;");
        this.ChangeStyle("button#start-reset", "style", "visibility:hidden;");
        this.AddContentToElement("button#start-reset", "Reset Game");
        this.Refresh("aside#time-remaining > span", this.TimeRemaining);
        this.GenerateQuestionAndAnswers();
    },
    GenerateQuestionAndAnswers: function()
    {
        this.FirstNumber = this.GenerateRandomNumber(9);
        this.SecondNumber = this.GenerateRandomNumber(9);
        this.CorrectAnswer = this.FirstNumber * this.SecondNumber;
        this.CorrectPosition = this.GenerateRandomNumber(3);
        this.ChangeStyle("section#question", "style", "height:auto;");
        this.AddContentToElement("section#question", this.FirstNumber   "x"   this.SecondNumber);
        this.AddContentToElement( "ul#choices > li:nth-of-type("   this.CorrectPosition   ")", this.CorrectAnswer );
        this.LoopThroughElements();
    },
    Action: function()
    {
        Counter.PlayingState = setInterval( function()
        {
            Counter.TimeRemaining--;
            
            if (Counter.TimeRemaining <= 20)
            {
                Counter.ChangeStyle("button#start-reset", "style", "visibility:visible;");
            }

            if (Counter.TimeRemaining < 1)
            {
                Counter.Stop();
            }
            else
            {
                Counter.Refresh("aside#time-remaining > span", Counter.TimeRemaining);
            }
        }, 1000 );
    },
    EventListener: function(event)
    {
        if ( Number(event.currentTarget.innerText) === Number(Counter.CorrectAnswer) )
        {
            Counter.Score  ;
            Counter.Refresh("aside#score > span", Counter.Score);
            Counter.GenerateQuestionAndAnswers();
            Counter.ChangeStyle("p#message", "style", "visibility:visible; background-color:#23A230;");
            Counter.AddContentToElement("p#message", "Correct");
        }
        else
        {
            if (Counter.Score >= 1)
            {
                
                Counter.Refresh("aside#score > span", Counter.Score);
            }
            
            Counter.ChangeStyle("p#message", "style", "visibility:visible; background-color:#DE401A;");
            Counter.AddContentToElement("p#message", "Try again");
        }

        setTimeout( function()
        {
            Counter.ChangeStyle("p#message", "style", "visibility:hidden;");
        }, 1000 );
    },
    CheckClickOnRightAnswer: function()
    {
        for (var index = 1; index < 5; index  )
        {
            document.querySelector("ul#choices > li:nth-of-type("   index   ")").removeEventListener("click", this.EventListener, false);
            document.querySelector("ul#choices > li:nth-of-type("   index   ")").addEventListener("click", this.EventListener);
        }
    },
    Stop: function()
    {
        this.IsStoped = true;
        clearInterval(this.PlayingState);
        this.ChangeStyle("ul#choices", "style", "pointer-events:none; opacity:0.4;");
        this.ChangeStyle("aside#time-remaining", "style", "visibility:hidden;");
        this.ChangeStyle("div#game-over", "style", "display:block;");
        this.AddContentToElement("button#start-reset", "Start Game");
        this.AddContentToElement( "div#game-over > p:last-of-type > span", (this.Score !== "00" amp;amp; this.Score < 10 ? "0" : "")   this.Score );
        this.AddContentToElement("aside#score > span", this.Score = "00");
    }
};



document.addEventListener('DOMContentLoaded', function()
{
    document.getElementById("start-reset").addEventListener("click", function()
    {
        Counter.Initialize(30);
        Counter.IsStoped ? Counter.Launch() : Counter.Stop();
        Counter.CheckClickOnRightAnswer();
    });
});  

 /*nav*/
main{
    width: auto;
    margin: 20px auto;
}
header nav {
    border-radius: 0.4rem;
    margin: 0.5rem auto;
    padding: 0.2rem 1rem;
    width: 140px;
  }
  nav {
    background: white;
    margin: 0 -0.5rem;
  }
   
  nav::after {
    content: "";
    display: block;
    clear: both;
  }
   
  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
   
  nav li {
    float: right;
  }
   
  nav a {
    display: block;
    padding: 1rem;
    text-decoration: none;
  }
   
  nav a:hover {
    background: rgb(240, 240, 240);

  }
   
  nav a:active {
    color: #cce;
  }
  li.contains ul {
    display: none;
  }
  li.contains:hover ul {
    background: white;
    display: block;
    position: absolute;
  }
  li.contains li {
    float: none;
    font-size: 0.9rem;
  }

/*end nav*/

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
  }

.title {
    float: left;
    width: 75%;
    margin-top: 6px;
  }
  .game{
    
        float: left;
        width: 25%;
        margin-top: 6px;
      }
  
  .row:after {
    content: "";
    display: table;
    clear: both;
  }

div{
   
    color:black;
    padding: 16px;
    font-size: 16px;
    border: none;
   position: inherit;
   text-align: center;
  }
  /*submit button*/
  input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: inherit;
  }
  @media screen and (max-width: 600px) {
    .col-25, .col-75, input[type=submit] {
      width: 100%;
      margin-top: 0;
    }
  }
  
* {
    margin: 0;
    padding: 0;
    outline: 0;
    word-break: break-all;
    box-sizing: border-box;
}

html {
    font-size: 100%;
    line-height: 1.5;
}

body {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    background-image: radial-gradient(circle, #FFF, #AAA);
    overflow-y: scroll;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

::-moz-focus-inner {
    border: 1px solid transparent;
}

main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-width: 320px;
    width: 96%;
    margin: 0 auto;
    padding: 20px 0;
}

main > div#container {
    background-color: #9DD2EA;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px #009DE4;
    font-size: 0;
    width: 90%;
}

main > div#container .structure-elements {
    display: inline-block;
    vertical-align: middle;
    padding: 10px;
    font-size: initial;
}

main > div#container > p#message {
    width: 65%;
    margin-right: 5%;
    color: white;
    font-weight: bold;
    visibility: hidden;
}

main > div#container > aside#score {
    color: #888E5F;
    background-color: #F1FF92;
    box-shadow: 0 4px #9DA853;
}

main > div#container > div#calculation {
    width: 80%;
    margin: 0 auto;
}

main > div#container > div#calculation > * {
    width: 100%;
    margin-top: 10px;
}

main > div#container > div#calculation > section#question {
    background-color: #9DA0EA;
    box-shadow: 0 4px #535AA8;
    font-size: 6.250rem;
    height: 170px;
}

main > div#container > div#calculation > p#instruction {
    background-color: #B481D9;
    box-shadow: 0 4px #8153A8;
}

main > div#container > div#calculation > ul#choices {
    padding: 0;
}

main > div#container > div#calculation > ul#choices > li,
main > div#container > button#start-reset {
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px rgba(0, 0, 0, 0.2);
    transition: box-shadow transform 0.2s;
}

main > div#container > div#calculation > ul#choices > li {
    width: 100%;
    background-color: white;
    margin-bottom: 10px;
    padding: 10px;
    height: 44px;
}

main > div#container > div#calculation > ul#choices > li:active,
main > div#container > button#start-reset:active {
    color: white;
    background-color: #9C89F6;
    box-shadow: 0 0 #6B54D3;
    transform: translateY(4px);
}

main > div#container > button#start-reset {
    background-color: rgba(255, 255, 255, 0.5);
    border: 0;
    margin: 10px auto;
    line-height: 1.5;
    display: block;
}

main > div#container > aside#time-remaining {
    background-color: rgba(181, 235, 36, 0.8);
    border-radius: 5px;
    box-shadow: 0 4px rgba(0, 0, 0, 0.2);
    visibility: hidden;
}

main > div#game-over {
    color: white;
    background-image: linear-gradient(#F3CA6B, #F3706C);
    font-size: 3rem;
    text-transform: uppercase;
    position: absolute;
    padding: 20px;
    min-width: 250px;
    display: none;
}


@media all and (min-width: 768px) {

}

@media all and (min-width: 992px) {
    
    main {
        max-width: 1350px;
        width: 50%;
    }

    main > div#container {
        width: 75%;
    }

    main > div#container > p#message {
        width: 25%;
        margin: 0 25%;
    }

    main > div#container > div#calculation > ul#choices {
        font-size: 0;
    }

    main > div#container > div#calculation > ul#choices > li {
        width: 24%;
        display: inline-block;
        font-size: initial;
    }

    main > div#container > div#calculation > ul#choices > li:not(:last-of-type) {
        margin-right: 1%;
    }

    main > div#container > button#start-reset {
        display: inline-block;
        margin: 10px;
    }
}

  
  
  
  
 
    

 <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="veiwpoint" content="width" device-width, initial-scale="1">
<link href="mstyles.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/4510115dc1.js" crossorigin="anonymous"></script>

<h1>Play2learn Logo</h1>
<nav>
      </div></li>
      
      <li class="contains"><a href="games.htlm">| Games</a>
        <ul>
          <li><a href="games:anagram-hunt.html">Anagram Hunt</a></li>
          <li><a href="games:math-facts.html">Math Facts Practice</a></li>
        </ul>
      <li> <a href="about.html"> | About</a></li>
       <li><a href="login.html">| Login</a></li>
       <li><a href="index.html">| Home</a></li>
       <li><a href="contact-us.html"> Contact</a></li>
    
    </nav>
    <hr>
<main>
    <div class="container">
        <form action="action_page.php">
            <div class="row">
                <div class="col-25">
                  <label for="game">Pick Your Game:</label>
                </div>
                <div class="col-75">
                  <select id="game" name="game">
                    <option value="addition">addition</option>
                    <option value="subtraction">subtraction</option>
                    <option value="multiplucation">multiplucation</option>
                  <option value="division">division</option>
                </select>
                </div>
              </div>
    <script>
      
        function myFunction() {
          document.getElementById("myDropdown").classList.toggle("show");
        }
        
        
        window.onclick = function(event) {
          if (!event.target.matches('.dropbtn')) {
            var dropdowns = document.getElementsByClassName("dropdown-content");
            var i;
            for (i = 0; i < dropdowns.length; i  ) {
              var openDropdown = dropdowns[i];
              if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
              }
            }
          }
        }

        
$(function() {
  $("#refresh").click(function() {
     $("#input").load("mathgame.html")
  
return false;
})
})
</script>
        <input type="submit" value="Go">
        </script>
  </div>
</div>
</div>
<div class="row">
  
  <script type="text/javascript">
    var number1;
    var number2;
    var answer3;
    var answer2;
    
    function problem()
    {
        number1 = Math.floor( 1   Math.random() * 9 );
        number2 = Math.floor( 1   Math.random() * 9 );
        var question = document.getElementById("question");
        question.innerHTML = "How much is "   number1   " times "   number2   " ?";
        answer2 = (number1*number2);
    }
    
    function answer1()
    {
        var statusDiv = document.getElementById("status");
        answer3=document.getElementById("answer").value;
    
        if(answer3 != answer2)
        statusDiv.innerHTML="No. Please try again";
        else
        if (answer3==answer2)
        {
            statusDiv.innerHTML="Very good!";
            document.getElementById("answer").value = "";
            problem();
        }
    }
    

    </script>
    </head>
   
    <body>
        <main>
            <div id="container">
                <p id="message" class="structure-elements"></p>
                <aside id="score" class="structure-elements">Score: <span>00</span></aside>

                <div id="calculation">
                    <section id="question" class="structure-elements"></section>
                    <p id="instruction" class="structure-elements">Type The corect answer</p>
                    <ul id="choices" class="structure-elements">
                       <td><input type="text"></input></td>
                       <li>enter</li>
                        
                        
                    </ul>
                </div>

                <button id="start-reset" class="structure-elements">Start Game</button>

                <aside id="time-remaining" class="structure-elements">Time remaining: <span>60</span> sec</aside>
            </div>

            <div id="game-over" class="structure-elements">
                <p>Game over!</p>
                <p>Your score is <span>00</span>.</p>
            </div>
        </main>

        
    </body>