ЖСО-201. Цифровые коммуникации. Практическое задание 6. Простая онлайн-форма

Для создания онлайн-формы вам потребуется: пять открытых вопросов с правильным ответом, реализующий их 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. Откройте класс упаковки опроса. В нем укажите ваш фоновый цвет онлайн-формы и необходимую ширину блока в процентах (в моем примере - 180):

.box {

  display: flex;

  flex-direction: column;

  width: ?;

  margin: auto;

  border-radius: 10px;

  padding: 1rem;

      }

7. Закройте </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>

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/2023/05/quizz-for-digital-communication.html 

Ссылки на выполненное задание принимаются в комментариях к данному посту до 15:00 18 мая.

Комментарии

  1. Влада Мурзаева15 мая 2023 г. в 22:17

    https://vladamurzaeva.blogspot.com/2023/05/blog-post.html Мурзаева

    ОтветитьУдалить
  2. Инесса Ступина15 мая 2023 г. в 22:21

    https://inessastupina.blogspot.com/2023/05/blog-post_15.html

    ОтветитьУдалить
  3. Насырова Софья15 мая 2023 г. в 22:23

    НАСЫРОВА
    https://sofyanasyrova734.blogspot.com/2023/05/1605.html

    ОтветитьУдалить
  4. Москова Анна15 мая 2023 г. в 22:25

    https://moskovaanna.blogspot.com/2023/05/blog-post.html Москова Анна

    ОтветитьУдалить
  5. Лягинская Юлия15 мая 2023 г. в 22:25

    https://lyaginskaya.blogspot.com/2023/05/blog-post.html

    ОтветитьУдалить
  6. Москова Анна15 мая 2023 г. в 22:25

    https://vikafedyachkina.blogspot.com/2023/05/blog-post.html Вика Федячкина

    ОтветитьУдалить
  7. Natalya Solodilova15 мая 2023 г. в 22:25

    https://natalyasolodilova.blogspot.com/2023/05/blog-post.html

    Солодилова Наталья

    ОтветитьУдалить
  8. Katherine15 мая 2023 г. в 22:26

    https://katyashh.blogspot.com/2023/05/marvel.html Саляхова Екатерина

    ОтветитьУдалить
  9. Arina Ibragimova15 мая 2023 г. в 22:28

    https://arinaibragimova.blogspot.com/2023/05/201-6.html

    ОтветитьУдалить
  10. Влада Кретинина15 мая 2023 г. в 22:30

    https://vladakretinina.blogspot.com/2023/05/blog-post.html

    ОтветитьУдалить
  11. Лихидько Софья15 мая 2023 г. в 22:30

    https://likhidkosoffa.blogspot.com/2023/05/blog-post_15.html

    ОтветитьУдалить
  12. Мария Курденкова15 мая 2023 г. в 22:33

    https://mariakurdenkova24.blogspot.com/2023/05/flat-design.html

    ОтветитьУдалить
  13. Lilek_Zherebyatyeva15 мая 2023 г. в 22:34

    https://lilekzherebyatyeva.blogspot.com/2023/05/blog-post.html
    Жеребятьева Лилька)

    ОтветитьУдалить
  14. Kondrateva15 мая 2023 г. в 22:35

    https://lkondratevalisa.blogspot.com/2023/05/blog-post.html

    ОтветитьУдалить
  15. Bolotnikova Sofa15 мая 2023 г. в 22:40

    https://bolotnikovamedia101.blogspot.com/2023/05/blog-post.html
    Болотникова Софья

    ОтветитьУдалить
  16. Aruba15 мая 2023 г. в 22:46

    https://aruba2772.blogspot.com/2023/05/201-6.html
    Бехтерева

    ОтветитьУдалить
  17. NemMarya15 мая 2023 г. в 22:53

    https://nemytovamarya.blogspot.com/2023/05/6.html

    ОтветитьУдалить
    Ответы
    1. dmitrykonn16 мая 2023 г. в 00:18

      Оценка "хорошо", фоновый цвет меньше окна опроса.

      Удалить
  18. Александр Красняк 15 мая 2023 г. в 23:14

    https://nazvaniepotompridumayu.blogspot.com/2023/05/var-questions-question-answer-question.html
    Красняк А.А.

    ОтветитьУдалить
    Ответы
    1. dmitrykonn16 мая 2023 г. в 00:19

      Оценка "хорошо". Вопросы исчезают при выводе результата.

      Удалить
  19. Лягинская Юлия16 мая 2023 г. в 21:50

    Работа № 5 https://lyaginskaya.blogspot.com/2023/05/blog-post_16.html

    ОтветитьУдалить
  20. Олеся Саночкина17 мая 2023 г. в 05:14

    https://olesyasanochkina.blogspot.com/2023/05/blog-post.html

    ОтветитьУдалить
  21. Bolotnikova Sofa17 мая 2023 г. в 06:12

    Задание с аналитикой
    https://bolotnikovamedia101.blogspot.com/2023/05/blog-post_17.html
    Задание лендинг
    https://bolotnikovamedia101.blogspot.com/2023/04/landing-with-prices-import-urlhttpsfonts.html
    Болотникова Софья

    ОтветитьУдалить
    Ответы
    1. dmitrykonn17 мая 2023 г. в 06:21

      Все задания приняты, оценка "хорошо". У вас осталось задание с баннером.

      Удалить
  22. Ольга Фатьянова17 мая 2023 г. в 07:22

    https://fatyanovaolya18.blogspot.com/2023/05/blog-post.html
    Фатьянова Ольга

    ОтветитьУдалить
  23. Олеся Саночкина17 мая 2023 г. в 08:01

    Лендинг: https://olesyasanochkina.blogspot.com/2023/05/landing-with-prices-import-urlhttpsfonts.html

    ОтветитьУдалить
  24. Вероника Алексеева17 мая 2023 г. в 08:07

    https://22veronika12.blogspot.com/2023/05/blog-post_24.html

    ОтветитьУдалить
  25. Дмитрий Сельвестру17 мая 2023 г. в 08:54

    https://dmitryselvestru.blogspot.com/2023/05/blog-post_17.html

    ОтветитьУдалить
  26. Дмитрий Сельвестру17 мая 2023 г. в 08:55

    Задание с баннером
    https://dmitryselvestru.blogspot.com/2023/05/blog-post.html
    Саночкина, Болотникова, Гильмиярова, Сельвестру

    ОтветитьУдалить
  27. Фатьянова Юлия17 мая 2023 г. в 09:28

    https://fatyanovayulya.blogspot.com/2023/05/blog-post.html

    ОтветитьУдалить
  28. Татьяна Букасева17 мая 2023 г. в 09:35

    https://bukasevat.blogspot.com/2023/05/blog-post.html
    Букасева Татьяна

    ОтветитьУдалить
  29. Олеся Саночкина17 мая 2023 г. в 09:59

    Аналитика: https://olesyasanochkina.blogspot.com/2023/05/4.html

    ОтветитьУдалить
  30. NemMarya17 мая 2023 г. в 11:08

    Вторая практика:
    https://nemytovamarya.blogspot.com/2023/05/2.html

    Третья практика:
    https://nemytovamarya.blogspot.com/2023/05/3.html

    ОтветитьУдалить
    Ответы
    1. dmitrykonn17 мая 2023 г. в 11:24

      Принято. Вторая - "удовлетворительно" - не запущен отсчет; третья - "хорошо"

      Удалить
  31. Дмитрий Сельвестру17 мая 2023 г. в 11:52

    Лендинг: https://dmitryselvestru.blogspot.com/2023/05/blog-post_39.html

    ОтветитьУдалить
  32. Pashnina Dora18 мая 2023 г. в 06:21

    4 задание аналитика: https://pashninadasha.blogspot.com/2023/05/4.html

    ОтветитьУдалить
  33. Pashnina Dora18 мая 2023 г. в 09:44

    https://pashninadasha.blogspot.com/2023/05/6.html

    ОтветитьУдалить
  34. Елена Нажмутдинова19 мая 2023 г. в 07:51

    Задание 2
    https://nazhmutdinovaelena.blogspot.com/2023/03/box-sizing-border-box-html-body-font.html?m=1

    ОтветитьУдалить
  35. Елена Нажмутдинова19 мая 2023 г. в 08:37

    Задание 3
    https://nazhmutdinovaelena.blogspot.com/2023/05/3.html

    ОтветитьУдалить
  36. Елена Нажмутдинова19 мая 2023 г. в 08:47

    Задание 4
    https://nazhmutdinovaelena.blogspot.com/2023/05/4.html

    ОтветитьУдалить
  37. Елена Нажмутдинова19 мая 2023 г. в 09:00

    Задание 6
    https://nazhmutdinovaelena.blogspot.com/2023/05/6.html

    ОтветитьУдалить
    Ответы
    1. dmitrykonn20 мая 2023 г. в 02:23

      Все задания приняты. У вас осталось задание с баннером.

      Удалить
  38. Pashnina Dora20 мая 2023 г. в 02:35

    3 задание лендинг: https://pashninadasha.blogspot.com/2023/05/font-facefont-familylatofont.html

    ОтветитьУдалить
  39. Астахова20 мая 2023 г. в 04:10

    Аналитика https://www.blogger.com/blog/post/edit/preview/543993049293944046/4115663592050412083

    Опрос https://www.blogger.com/blog/post/edit/preview/543993049293944046/7833694879439694396

    ОтветитьУдалить
    Ответы
    1. dmitrykonn20 мая 2023 г. в 09:56

      Принято. Просьба в дальнейшем давать ссылку на само задание, а не на его редактирование.

      Удалить
  40. Ксения20 мая 2023 г. в 08:50

    Добрый вечер!
    Задание - лендинг с прайсом:

    https://stepkina03.blogspot.com/2023/05/201_59.html

    Задание - лендинг с акцией

    https://stepkina03.blogspot.com/2023/05/201_20.html

    Задание с веб-аналитикой:

    https://stepkina03.blogspot.com/2023/05/201.html

    Задание с опросом:

    https://stepkina03.blogspot.com/2023/05/blog-post.html

    ОтветитьУдалить
    Ответы
    1. dmitrykonn20 мая 2023 г. в 09:55

      Принято. У вас осталось задание с баннером.

      Удалить
  41. Дмитрий Сельвестру20 мая 2023 г. в 08:56

    Задание с аналитикой
    https://dmitryselvestru.blogspot.com/2023/05/blog-post_20.html

    ОтветитьУдалить
  42. Астахова22 мая 2023 г. в 02:36

    Лендинг с прайсом: https://astakhovaa.blogspot.com/2023/05/landing-with-prices-import-urlhttpsfonts.html

    Лендинг с акцией: https://astakhovaa.blogspot.com/2023/05/201.html

    Астахова Анна

    ОтветитьУдалить

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