Современные технологии производства СМИ. 4 курс. Практическое занятие №4. Quizz-форма опроса

Для создания формы опроса вам потребуется: пять открытых вопросов с правильным ответом, реализующий их JavaScript, стили страницы в CSS и общие параметры страницы в HTML.

1. Откройте <html> и <head>, укажите стандартный заголовок

<title>Ваш заголовок</title>

2. Встройте стандартную библиотеку bootstrap. Взять ее можно здесь: https://raw.githack.com/Dmitrykonn/locals/main/bootstrapmin.css

3. В CSS укажите стиль заголовка:

<style>

  .title {

text-align:center;

font-size:50px;

}

4. Вариант отображения в классах верных и неверных ответов:    

.correct {

color:green;

}

.incorrect {

color:red;

}

5. Заголовки текста, где будут выводиться верные и неверные ответы:

h1.correct, h1.incorrect {

width:250px;

}

6. Откройте класс упаковки опроса. В нем укажите ваш фоновый цвет и необходимую ширину блока в процентах:

.box {

  display: flex;

  flex-direction: column;

  width: ?;

  margin: auto;

  border-radius: 10px;

  padding: 1rem;

      }

7. Закройте </head>, внутри <body> разверните классы упаковки, контейнера и расположения полей в bootstrap-верстке для всех пяти вопросов:

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

8. Отделите от основного опроса и укажите кнопку с запросом результата:

<br>

<button type="button" onclick="testResults()" class="btn btn-primary btn-lg">Результат</button> 


9. Закройте блок формы </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>

10. Закройте все оставшиеся классы.

11. Встройте стандарт библиотеки jQuery. Взять ее можно здесь: https://raw.githack.com/Dmitrykonn/locals/main/jquerymin.js

12. Теперь вам нужно прописать сценарий ответов на вопросы в JavaScript. Укажите формулировки вопроса и правильные ответы. Ответы должны состоять только из строчных букв:

  var questions = [ 

{

question: "Ваш вопрос?",

answer: "ваш ответ"

},

{

question: "Ваш вопрос?",

answer: "ваш ответ"

},

{

question: "Ваш вопрос?",

answer: "ваш ответ"

},

{

question: "Ваш вопрос?",

answer: "ваш ответ"

},

{

question: "Ваш вопрос?",

answer: "ваш ответ"

}

]

13. Укажите сценарий подсчета результатов:

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

}

14. Закройте оставшиеся теги  </body> и </html>

Если все верно, то ваш опрос будет отображаться как в примере: https://konoplevdesign3.blogspot.com/2022/11/quizz.html. Ссылки на выполненное задание принимаются в комментариях к данному посту до 15:00 22 ноября.

Комментарии

Добавлять новые комментарии запрещено.

Популярные сообщения