Тёмный

Реальный проект на JavaScript Викторина, quiz, квиз, опросник 

ВебКадеми | Юрий Ключевский
Подписаться 55 тыс.
Просмотров 36 тыс.
50% 1

Практический урок по написанию проекта квиз на JavaScript. В этом уроке напишем анкету опросник на JavaScript по готовой верстке.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 01 Июля 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 08 Июля 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Тайм-коды и код к уроку
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Стартовый код к уроку в Telegram канале: t.me/+9XtDDNBdHAk4Yjhi
00:00 Демо проекта
00:52 Курс по JavaScript
02:01 Блок схема проекта
11:41 Основы по JS
12:12 Знакомство с версткой проекта
16:32 Начинаем писать JS код
23:20 Отображение вопроса. Функция showQuestion
35:55 Отображение вариантов ответов.
42:21 Проверка ответа пользователя. Функция checkAnswer
48:29 Проверка на ответ пользователя
51:25 Получение варианта ответа пользователя
53:10 Доработка шаблона с ответами. Функция showQuestion
01:02:20 Получение ответа пользователя внутри checkAnswer
01:05:15 Проверка верности ответа пользователя
01:09:34 Проверка на количество вопросов
01:15:55 Результаты викторины. Функция showResults

Опубликовано:

 

25 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 84   
@user-yk4yq8zp7l
@user-yk4yq8zp7l Год назад
Спасибо за урок! Очень доступно и информативно!!!
@emmekh
@emmekh 2 года назад
отличный урок! успел только на конец премьеры, но обязательно гляну на досуге от начала
@mikhail_shokun
@mikhail_shokun 2 года назад
Это просто неимоверно подробно и качественно рассказано, и очень приятно слушать этого человека!!! Спасибо за контент!!!
@WebCademy
@WebCademy 2 года назад
Спасибо за комментарий!)
@user-te7or3yi9s
@user-te7or3yi9s 2 года назад
По больше таких видео по JS))) Молодец! Очень информативный ролик)
@slava_tfdf
@slava_tfdf Год назад
СПАСИБО ЗА УРОКИ todo + quiz Очень интересует создание регистрации пользователей и вход в личный кабинет. С удовольствием просмотрел бы урок в вашем исполнении.
@help1c8
@help1c8 2 года назад
Понадобилось ребенку помочь с проектом, материала из ролика хватило за глаза! Спасибо!
@PrikolovPomjka
@PrikolovPomjka 2 года назад
Отличный урок, спасибо🙏💕
@belwer3187
@belwer3187 Год назад
Юрий, огромное спасибо за материал! Подача материала очень понравилась, в целом просто космос материал! 🚀🚀🚀
@user-ed1pw3li3l
@user-ed1pw3li3l 2 года назад
Вы бы знали, как вы помогли мне с проектом! Спасибо огромное! Очень понятно, однозначно лайк.
@user-bv3mv9um3i
@user-bv3mv9um3i 2 года назад
Отличный контент. Этот урок дает мне понять будет выглядеть подача материала в курсе JS. Обязательно буду брать. И вообще очень много узнал на вашем канале
@meowmeowmeowmeow000
@meowmeowmeowmeow000 3 месяца назад
чем больше узнаю JS тем больше удивляюсь что на нем можно делать и то как это круто получается в итоге
@connorweb361
@connorweb361 Год назад
Очень крутой материал. Спасибо за выпуск! Хотелось бы конечно увидеть разбор этого CSS кода
@user-kh7fv5rn1g
@user-kh7fv5rn1g 2 года назад
Я подписана давно, но на это видео уведомления не было. 🤷‍♀️ сейчас только пришло. Юрий отлично объясняет. Квиз - это КРУТО!
@artemkamyshenkov3492
@artemkamyshenkov3492 Год назад
спасибо за урок!
@elenasobol4022
@elenasobol4022 4 месяца назад
Спасибо за подробное объяснение. Все очень понятно и доступно. Урок очень понравился. Сравнивала с другими уроками, ваш 10/10!
@alex86424
@alex86424 Год назад
Спасибо большое! Отличное объяснение! Лучший учитель!
@pahaivanov1611
@pahaivanov1611 2 года назад
Супер!
@razmiqayelyan1497
@razmiqayelyan1497 2 года назад
Super!
@user-qi1bz3hr2e
@user-qi1bz3hr2e Год назад
Спасибо больше удачи❤
@d.s.korochkin9238
@d.s.korochkin9238 2 года назад
Очень крутой контент)
@Anatoli-bq1pe
@Anatoli-bq1pe Год назад
Класс!
@meowmeowmeowmeow000
@meowmeowmeowmeow000 3 месяца назад
Очень крутой видос, спасибо огромное
@kawaki4639
@kawaki4639 2 года назад
у тебя лучший контент по front end на русском ютубе, странно почему так мало просмотров, надеюсь в скором времени будет курс по React)
@WebCademy
@WebCademy 2 года назад
Спасибо!)
@killd0z3r
@killd0z3r Год назад
Был другой канал и больше просмотров и подписчиков у автора, и к сожалению недоброжелатели заблокировали канал
@veryslon5104
@veryslon5104 Год назад
Спасибо
@Max-ed4yd
@Max-ed4yd Год назад
Спасибо, почерпнул много интересной информации ну и практика есть практика.. Для начинающих это маст хэв по роликам уже комментировали - очень интересует создание регистрации пользователей и вход в личный кабинет, было бы круто такое увидеть
@doniyorallayorov5804
@doniyorallayorov5804 2 года назад
Блин, первый раз всё полностью понял!
@vlad1len.
@vlad1len. Год назад
спасибо
@user-um4tq7oj1x
@user-um4tq7oj1x Год назад
Можете в следующих уроках показывать лучшие практики? Помимо просто решения радачи.
@evgeniy8695
@evgeniy8695 2 года назад
It’s a very useful lesson. Thank you. Can you make a tutorial step-by-step quiz form on js and php ?
@edwarddeveloper6088
@edwarddeveloper6088 2 года назад
Красава
@Lazorevka15
@Lazorevka15 Год назад
Огрооомное спасибо за видео! Искала как раз, где весь код был бы написан на JavaScript и перезаписывался бы в html! Прикрутила к коду алгоритм перемешивания вопросов с Хабра, чтоб вопросы выводились в рандомном порядке: function shuffle(questions) { var j, temp; for(var i = questions.length - 1; i > 0; i--){ j = Math.floor(Math.random()*(i + 1)); temp = questions[j]; questions[j] = questions[i]; questions[i] = temp; } return questions; };
@user-wc3wl3dl1q
@user-wc3wl3dl1q Год назад
Здравствуйте, можете пожалуйста отправить полный код
@nikomunikabelen8540
@nikomunikabelen8540 2 года назад
Отличный урок, спасибо. А ссылку на блок схему можно? Или она была в видео где то и я пропустил?)
@anatolyannenko1821
@anatolyannenko1821 Год назад
можно было бы еще рассказать новичкам как на чекбоксах делать, в том случае, когда из 4 вариантов верные 2
@piligrim_7
@piligrim_7 Год назад
Объяснение хорошее , вот это я понимаю . А то на ютубе многие стали учителями , но толком никто не может нормально объяснить ничего .
@beautyisinternal6953
@beautyisinternal6953 Год назад
жаль что нет кода конечного. Писала все как у вас, но ничего не сработало. Где-то что то упустила видимо, и как теперь сверять что не так :(( а перематывать туда сюда полторачасовой туториал и останавливать чтобы проверить нереально, при чем вы постоянно что то корректировали. Но урок был очень полезный,спасибо!
@mEden-xw2ke
@mEden-xw2ke 3 месяца назад
Бедняга
@mikaelgevorgyan4521
@mikaelgevorgyan4521 2 года назад
вот вот =)) нужна на схеме всё делать, а не в уме,когда в уме и после, что-то надо менять или добавить,и к примеру проект был давно.Даже мастер по программированию не вспомнит, что он там писал и как, даже файлики не сможет найти, а если ещё проект с другой страны то вообще 0о0 взрыв мозга там разбиратся. Лучше иметь так сказать чертёж своего проекта.Уж если встретится с похожай логикай тебе кодить даже не надо будет соберёшь и всё готова будет и быстрее и качество остаётся на высоте=)) и быстрее деньги получешь!
@user-jb4zp2ll2d
@user-jb4zp2ll2d Год назад
Очень хорошо рассказано .Делая практику вместе с вами я кайфанул.У меня вопрос когда вы нашли кнопку по id то назвали переменную submit ,но входе урока вы написали вместо submit в некоторых местах ,submitbtn .Что я не мог понять то что у вас не вывела ошибку ?.У меня вывела ошибку.
@user-gi6tw7yc8q
@user-gi6tw7yc8q 2 года назад
Здравствуйте. Подскажите пожалуйста, где можно найти или скачать перевод всех команд JavaScript с английского на русский язык?
@alexrock3162
@alexrock3162 Год назад
Подскажите, пожалуйста, возможно где-то это рассматривалось уже: как сделать, чтобы ответ пользователя после клика - записвался бы в ассоциативный массив?
@AndreiKilin
@AndreiKilin 2 года назад
"Win + ." -- эмодзи в Вин10
@user-yt5iv1iy9t
@user-yt5iv1iy9t Год назад
скажите, пожалуйста, вот у вас через %title%, %message%, %result% выводится определенный текст по завершению теста в соответствие с результатами. а также можно сделать с картинкой? в смысле в зависимости от полученного результата своя картинка я если делаю подобную конструкцию, пробовав по разному заменять у img заменять src, мне все время пишет консоль "caught TypeError: Cannot set properties of null (setting 'src').." Может, конечно, я не верно задаю замену scr
@replixshop6903
@replixshop6903 2 года назад
Вопрос такой а почему просто не использовать innertext и заменять текст, разве это не проще?
@anyname9117
@anyname9117 10 месяцев назад
Всё супер! Легко и доступно, логично и просто. Всё работает. Только не понимаю, почему listContainer, а не привычный document в строчке ".querySelector('input[type="radio"]:checked');"
@WebCademy
@WebCademy 10 месяцев назад
Просто выполнил поиск внутри listContainer, а не по всему документу.
@RamazanDjafarov
@RamazanDjafarov Год назад
Давай сделаем проект Гирлянда ))))
@Askeran17
@Askeran17 6 месяцев назад
Не подскажите какой код надо добавить чтобы выводился подсчет правильных и неправильных ответов во время опроса?
@user-gf1gf4fk2i
@user-gf1gf4fk2i 2 года назад
document . querySelector не очищает... только через getElementById
@N.E.E.T1000
@N.E.E.T1000 Год назад
а как сделать чтобы можно было картину поставить на ответы
@stupid_duck
@stupid_duck 3 месяца назад
Где можно найти готовый код с урока для сравнения? Я не могу решить проблему, счетчик в результате не добавляется.
@user-cj2rg8ur6t
@user-cj2rg8ur6t Год назад
Подскажите как доработать код, если помимо радио инпутов, нужно чтобы код выводил select с выбором ответов?
@WebCademy
@WebCademy Год назад
В массив с вопросами добавить обект с вопросом для select снабдив данный вопрос дополнительным свойством которое будет сообщать что нужно вывести select. Далее в функции рендера вариантов ответа проверять это поле и если там тип вывода select тогда рендерить select.
@vardyny
@vardyny 2 года назад
Здравствуйте Очень круто, спасибо, я повторил и получил такой же результат и подразобрался самую малость что понял в JS Есть только вопрос: как сделать так, чтобы если ответ был неверным квиз останавливался, человеку показывало сообщение "You lose" и все, на этом все окончено Или хотя бы чтобы человека редиректило на страницу где ему сообщит, что он проиграл
@WebCademy
@WebCademy 2 года назад
Добрый день. Можно реализовать. Написать условие которое будет выдавать такой alert при неверном ответе и делать выход из функции которая запускает викторину.
@JeKerManGamer
@JeKerManGamer 11 месяцев назад
Привет из 2023! Уже с самого начала что-то не так :) После написания функции showQuestion контент на странице не отображается и в принципе ничего не происходит. Раз 5 перепроверил, всё, как на видео. Даже странно как-то
@marinazilkina6875
@marinazilkina6875 Год назад
А подскажите как решить такую проблему - при создании функции checkedAnswer вылезвет ошибка Uncaught TypeError: Cannot set properties of null(setting "onclick") не работает именно const chekcedRadio = listContainer.querySelector('input[type="radio"]:checked'), там вечно null получается. пробовала отлавливать AddEvenetListener'ом - та же проблема, и через window.onload не работает.
@marinazilkina6875
@marinazilkina6875 Год назад
Решила вопрос
@pudgechack8357
@pudgechack8357 Год назад
@@marinazilkina6875 как решила
@Lazorevka15
@Lazorevka15 Год назад
Обратные кавычки - это ё на клавиатуре. Вдруг кто-то, как я, не знает))
@olgaarakelyan1821
@olgaarakelyan1821 2 года назад
А что сделать если строчка for (item of …) не работает.В console говорит item is not defined.
@nikile.
@nikile. 2 года назад
Вам нужна еще помощь?
@nikile.
@nikile. 2 года назад
Если да то просто напишите for(let/const item of…)
@christianspace9700
@christianspace9700 Год назад
@@nikile. спасибо застрял на этом моменте :D
@unknown.6914
@unknown.6914 Год назад
11.31 9.04
@satantenn
@satantenn 3 месяца назад
Интересно а зачем учить как писать не надо? Почему replace а не интерполяции и почему иннерхтмл вместо createElement?
@user-zi2iu5ep4l
@user-zi2iu5ep4l Год назад
А как сделать опросник,когда человек даёт несколько ответов и на основании этих ответов ему что-то подбирается ( например опросник какой ты кот)?
@WebCademy
@WebCademy Год назад
Дописать в конце логику которая будет высчитывать результат на основе данных ответов. Можно сделать так что каждый ответ имеет определенное кол-во балов, и в зависимости от набранных баллов - результат.
@user-zi2iu5ep4l
@user-zi2iu5ep4l Год назад
@@WebCademy , Спасибо!
@user-ln8nl2hh4h
@user-ln8nl2hh4h 2 года назад
ругается на onclick в чем может быть проблема?
@user-ln8nl2hh4h
@user-ln8nl2hh4h 2 года назад
main.js:47 Uncaught TypeError: Cannot set properties of null (setting 'onclick')
@razmiqayelyan1497
@razmiqayelyan1497 2 года назад
Я просто не понял ${} вместо replace не используется
@WebCademy
@WebCademy 2 года назад
Да, можно было сделать интерполяцию. Просто решил с метками сделать. С ${} было бы проще.
@flyeron1981
@flyeron1981 2 года назад
И это не будет работать в internet explorer 11 и ниже. Просто предупредил ;)
@user-ou7jq5qe4l
@user-ou7jq5qe4l Год назад
36:42 А нельзя было querySelector использовать?
@WebCademy
@WebCademy Год назад
Найти элемент на странице и вставить в него нужный текст? В принципе можно реализовывать и таким способом, но это будет другой подход для всего проекта.
@user-ou7jq5qe4l
@user-ou7jq5qe4l Год назад
@@WebCademy благодарю за ответ!:)
@zeyter_off
@zeyter_off 5 месяцев назад
Очень не приятны моменты по типу 57:17 , стараешься понять что это а потом тебе говорят хотя нет давайте сделаем попростому. нельзя было сразу по простому? В остальном хороший видеоролик, Спасибо!
@dogvscatfunny9956
@dogvscatfunny9956 11 месяцев назад
Уже изначально смотреть не стоит,не чего не понятно ошибки как всегда разбирать подобные автора не будут пустая трата времени.
@WebCademy
@WebCademy 11 месяцев назад
Эм... а чего не понятного то? Готовый код с урока есть. Если не получается - скачали, сравнили со своим. Нашли ошибку исправили. Если нужны проверки или индивидуальная обратная связь - то это другой формат взаимодействия.
@dogvscatfunny9956
@dogvscatfunny9956 11 месяцев назад
@@WebCademy Еще надо понять где скачивать,ведь у вас не все так просто на деле,а просто все на словах как и всегда)
Далее
2000 vs 2100
00:15
Просмотров 16 тыс.
Анимация поля ввода
12:05
The ultimate NestJS Authentication guide
31:00