Untitled

<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:visibility="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>MathJax example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script type="text/javascript" async
            src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async>
    </script>
    <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        "HTML-CSS": { scale: 200, linebreaks: { automatic: false } },
        SVG: { linebreaks: { automatic:false } },
        displayAlign: "left" });
</script>
</head>

<style>
@media print {
body {-webkit-print-color-adjust: exact;}
}
/* Normal white Button as seen on Google.com*/
button {
    color: #444444;
    background: #F3F3F3;
    border: 1px #DADADA solid;
    padding: 5px 10px;
    border-radius: 2px;
    font-weight: bold;
    font-size: 9pt;
    outline: none;
}

button:hover {
    border: 1px #C6C6C6 solid;
    box-shadow: 1px 1px 1px #EAEAEA;
    color: #333333;
    background: #F7F7F7;
}

button:active {
    box-shadow: inset 1px 1px 1px #DFDFDF;
}

/* Blue button as seen on translate.google.com*/
button.blue {
    color: white;
    background: #4C8FFB;
    border: 1px #3079ED solid;
    box-shadow: inset 0 1px 0 #80B0FB;
}

button.blue:hover {
    border: 1px #2F5BB7 solid;
    box-shadow: 0 1px 1px #EAEAEA, inset 0 1px 0 #5A94F1;
    background: #3F83F1;
}

button.blue:active {
    box-shadow: inset 0 2px 5px #2370FE;
}

/* Orange button as seen on blogger.com*/
button.orange {
    color: white;
    border: 1px solid #FB8F3D;
    background: -webkit-linear-gradient(top, #FDA251, #FB8F3D);
    background: -moz-linear-gradient(top, #FDA251, #FB8F3D);
    background: -ms-linear-gradient(top, #FDA251, #FB8F3D);
}

button.orange:hover {
    border: 1px solid #EB5200;
    background: -webkit-linear-gradient(top, #FD924C, #F9760B);
    background: -moz-linear-gradient(top, #FD924C, #F9760B);
    background: -ms-linear-gradient(top, #FD924C, #F9760B);
    box-shadow: 0 1px #EFEFEF;
}

button.orange:active {
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.3);
}

/* Red Google Button as seen on drive.google.com */
button.red {
    background: -webkit-linear-gradient(top, #DD4B39, #D14836);
    background: -moz-linear-gradient(top, #DD4B39, #D14836);
    background: -ms-linear-gradient(top, #DD4B39, #D14836);
    border: 1px solid #DD4B39;
    color: white;
    text-shadow: 0 1px 0 #C04131;
}

button.red:hover {
     background: -webkit-linear-gradient(top, #DD4B39, #C53727);
     background: -moz-linear-gradient(top, #DD4B39, #C53727);
     background: -ms-linear-gradient(top, #DD4B39, #C53727);
     border: 1px solid #AF301F;
}

button.red:active {
     box-shadow: inset 0 1px 1px rgba(0,0,0,0.2);
    background: -webkit-linear-gradient(top, #D74736, #AD2719);
    background: -moz-linear-gradient(top, #D74736, #AD2719);
    background: -ms-linear-gradient(top, #D74736, #AD2719);
}


/*=======================================*/


</style>

<body>

<p>
    Найдите корень уравнения: \(2-5(x+7) = -4x+3\)
</p>
Ответ:
<input size="10" type="text" name="answer_5_rat_5" title="-36" class="test_inp" id="answer1">
<p>
    Решите уравнение \(x^2 + 10000 = 200x\). Если уравнение имеет более одного корня, в ответе запишите больший из корней.
</p>
Ответ:
<input size="10" type="text" name="answer_5_rat_1" class="test_inp" title="100" id="answer2">

<p>
    Решите уравнение \(-(x+2)^2 = -2-x \). Если уравнение имеет более одного корня, в ответе запишите больший из корней.
</p>
Ответ:
<input size="10" type="text" name="answer_5_rat_2" class="test_inp" title="-1" id="answer3">

<p>
    <button type="button" id="1" class="btn btn-primary">Проверка</button>
</p>
<div id="result">

</div>
<p id ="succ" hidden="hidden" >
<img src="succs.gif" alt="Funny image" height=200 width=250>
</p>

<p id ="answersCorrelation" hidden="hidden" >

    <button type="button" id="2" class="btn btn-primary">Распечатать результаты теста</button>

</p>

<main role="main" class="container">

</main>

</body>

<script>

    var count = 0;
    var inputs =document.getElementsByTagName('input').length;

    $("#1").click(function() {
        var inputVal = $("#answer1");
        console.log(inputVal.attr('title'));
        if (inputVal.val() === inputVal.attr('title')) {
            inputVal.css("backgroundColor", "green");
            count++;
        } else {
            inputVal.css("backgroundColor", "red");
        }

        var inputVal1 = $("#answer2")
        if (inputVal1.val() === inputVal1.attr('title')) {
            inputVal1.css("backgroundColor", "green");
            count++;
        } else {
            inputVal1.css("backgroundColor", "red");
        }

        var inputVal2 = $("#answer3")
        if (inputVal2.val() === inputVal2.attr('title')) {
            inputVal2.css("backgroundColor", "green");
            count++;
        } else {
            inputVal2.css("backgroundColor", "red");
        }

        $("#result").text("Вы решили правильно " + count + " из " + inputs + " заданий")
        if (count===3){
        $("#succ").removeAttr('hidden');
          $("#answersCorrelation").attr("hidden",true);

        }
        else{
                $("#answersCorrelation").removeAttr('hidden');
                 $("#succ").attr("hidden",true);
        }
                count = 0;

    })

    $("#2").click(function() {
      window.print();
 })

</script>

</html>