Нужно сделать так, чтобы при нажатии на кнопку появлялось окно. Оно появляется и сразу исчезает. Вот HTML:
<!DOCTYPE html>
<html>
<head>
<title>Тестовое задание</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- Блок с заданием-->
<div id="task">
<!-- Номер задания-->
<p id="number_question">
Задание № 5.
</p>
<!-- Условие-->
<p> $$\frac{3\frac{1}{7}+1\frac{1}{4}(75:\frac{25}{3}-14)\cdot\frac{4}{7}}{2\sqrt{\frac{2}{0+\frac{1}{2} }}\cdot\frac{1}{2}}=$$
</p>
</div>
<!-- Блок ввода и отправки ответа-->
<div id="answer_inner">
<form method="post">
<input type="text" placeholder="0" id="answer"/>
<input type="submit" id="answer_submit" value="ответить"/>
</form>
</div>
<!--Окно при правильном ответе-->
<div id="correct_answer_inner">
<img src="img/correct_answer_smile.png" class="smile" alt="Ответ правильный"/>
<form>
<input type="submit" class="next_question" value="следующий вопрос"/>
</form>
</div>
<!--Окно при неправильном ответе-->
<div id="error_answer_inner">
<img src="img/error_answer_smile.png" class="smile" alt="Ответ неправильный"/>
<form>
<input type="submit" id="one_more" value="ответить еще раз"/>
<input type="submit" class="next_question" value="следующий вопрос"/>
</form>
</div>
<!-- Подключение и конфигурация MathJax (верстка формул)-->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
</script>
<!--Подключение скрипта для обработки ответа-->
<script src="js/script.js">
</script>
</body>
</html>
CSS:
/* Обнуление стилей*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body{
font-family:Arial;
font-size:14px;
}
#task{
border: 2px solid #ACAAA9;
width:500px;
position:relative;
left:50%;
margin-left:-250px;
margin-bottom:40px;
}
#number_question{
padding:5px;
background:#BBBAB9;
}
#answer_inner{
width:500px;
position:relative;
left:50%;
margin-left:-250px;
text-align:center;
}
#answer{
padding:5px;
width:490px;
margin-bottom:20px;
}
#answer_submit, .next_question{
font-size:20px;
padding:10px;
text-transform:uppercase;
border:none;
background:green;
color:white;
}
#correct_answer_inner{
z-index:1000;
position:absolute;
min-width:200px;
min-height:100px;
background:#fff;
top:50%;
margin-top:-90px;
left:50%;
margin-left:-133px;
padding:10px;
text-align:center;
display:none;
}
#error_answer_inner{
z-index:100;
position:absolute;
min-width:200px;
min-height:100px;
background:#fff;
top:50%;
margin-top:-90px;
left:50%;
margin-left:-235px;
padding:10px;
text-align:center;
display:none;
}
.smile{
margin-bottom:20px;
}
#one_more{
font-size:20px;
padding:10px;
text-transform:uppercase;
border:none;
background:#393185;
color:white;
}
JS:
var fun=function(){
client_answer=client_answer_inner.value;
if (client_answer==correct_answer){ //ответ правильный
correct_window.style.display="block";
}
else if (client_answer=null){ //ничего не ввел
error_window.style.display="block";
}
else{ //ответ неправильный
error_window.style.display="block";
}
}
var correct_answer='-3/14'; //правильный ответ
var client_answer=''; //для хранения ответа клиента
var client_answer_inner=document.getElementById("answe r"); //для доступа к полю ввода ответа
var answer_button=document.getElementById("answer_subm it"); //доступ к кнопке отправки
answer_button.onclick=fun; //при нажатии на кнопку оправки выполнится функция
var correct_window=document.getElementById("correct_an swer_inner");
var error_window=document.getElementById("error_answer _inner");
