Опрос
<html>
<head>
<title>Опрос</title>
<link rel="stylesheet" href="https://raw.githack.com/Dmitrykonn/locals/main/bootstrapmin.css">
<style>
.title {
text-align:center;
font-size:50px;
}
.correct {
color:green;
}
.incorrect {
color:red;
}
h1.correct, h1.incorrect {
width:250px;
}
.box {
display: flex;
flex-direction: column;
width: 180%;
margin: auto;
border-radius: 10px;
padding: 1rem;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="container">
<h1 class="title">Опрос</h1>
<div class="row">
<form class="col-sm-7">
<div class="form-group">
<h4 id="question0"></h4>
<input id="answer0" type="text" class="form-control">
</div>
<div class="form-group">
<h4 id="question1"></h4>
<input id="answer1" type="text" class="form-control">
</div>
<div>
<h4 id="question2"></h4>
<input id="answer2" type="text" class="form-control">
</div>
<div class="form-group">
<h4 id="question3"></h4>
<input id="answer3" type="text" class="form-control">
</div>
<div>
<h4 id="question4"></h4>
<input id="answer4" type="text" class="form-control">
</div>
<br>
<button type="button" onclick="testResults()" class="btn btn-primary btn-lg">Результат</button>
</form>
<div class="col-sm-2 col-sm-offset-1">
<h1 class="correct">Верно: <span id="correct"></span></h1>
<h1 class="incorrect">Неверно: <span id="incorrect"></span></h1>
</div>
</div>
</div>
<div>
<script src="https://raw.githack.com/Dmitrykonn/locals/main/jquerymin.js"></script>
<script>
var questions = [
{
question: "Сколько костей у человека?",
answer: "206"
},
{
question: "Сколько пальцев у человека?",
answer: "20"
},
{
question: "Кто автор сказки Муму?",
answer: "Иван Тургенев"
},
{
question: "Сколько томов романе Война и мир?",
answer: "4"
},
{
question: "Сколько детей у Сергея Васнецова в сериале Папины дочки?",
answer: "6"
}
]
for(i = 0; i < questions.length; i++) {
q = questions[i].question
document.getElementById('question' + [i]).textContent = q
}
function testResults() {
var correct = 0;
var incorrect = 0;
for(i = 0; i < questions.length; i++) {
var answer = questions[i].answer
var guess = document.getElementById('answer' + [i]).value
var questionSpot = document.getElementById('question' + [i])
if(answer == guess) {
questionSpot.className = 'correct'
correct++
} else {
questionSpot.className = 'incorrect'
incorrect++
}
}
document.getElementById('correct').textContent = correct
document.getElementById('incorrect').textContent = incorrect
}
</script>
</body>
</html>
Комментарии
Отправить комментарий