Untitled

<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>
    a {
	position: relative;
	display: inline-block;
	padding: 1.2em 2em;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	user-select: none;
	color: white;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: linear-gradient(135deg, #6e8efb, #a777e3);
		border-radius: 4px;
		transition: box-shadow .5s ease, transform .2s ease;
		will-change: transform;
		box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
		transform:
			translateY(var(--ty, 0))
			rotateX(var(--rx, 0))
			rotateY(var(--ry, 0))
			translateZ(var(--tz, -12px));
	}

	&:hover::before {
		box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
	}

	&::after {
		position: relative;
		display: inline-block;
		content: attr(data-title);
		transition: transform .2s ease;
		font-weight: bold;
		letter-spacing: .01em;
		will-change: transform;
		transform:
			translateY(var(--ty, 0))
			rotateX(var(--rx, 0))
			rotateY(var(--ry, 0));
	}
}

</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>

<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 + " заданий")
        count = 0;
    })
</script>

</html>