Как сделать викторину с несколькими вариантами ответов в HTML-коде

Привет Кодер! Добро пожаловать в блог Codewithrandom. В этой статье мы создадим Викторину с множественным выбором, используя HTML-код. В этой викторине с множественным выбором у нас есть вопросы и ответы с использованием HTML, Css и JavaScript. На вопросы с несколькими вариантами ответов в этом простом приложении-викторине вам нужно выбрать один из возможных ответов.

Викторина с несколькими вариантами ответов (MCQ) с использованием HTML[/caption]

сначала вы играете в викторину с несколькими вариантами ответов (MCQ), а затем нажимаете «Просмотреть результаты». Затем будет показана страница результатов. Эта викторина с несколькими вариантами ответов (MCQ) будет завершена с использованием кода JavaScript, мощного языка, который позволяет все.

Как вы смотрите в предварительном просмотре проекта, как это организовано.

Ниже приводится особенность нашего проекта: -

• Мы упорядочили вопросы и варианты ответов в виде списка с помощью тега ‹li›.
• Затем мы устанавливаем параметр, используя диапазон, определяя переключатель и задавая соответствующее значение.
• И, наконец, мы определили кнопку с событием щелчка и разделом span для отображения результатов.

HTML-код викторины с множественным выбором: -

Теперь я посоветую вам определить структуру с помощью HTML. Не с нуля, просто код, который находится под тегом body.

У нас есть следующая часть в разделе HTML:

• Во-первых, мы называем класс ul, который мы определили как класс викторины.
• Затем с помощью тега ‹li› мы задали наш вопрос в теге ‹h4›.
• Затем мы использовали тег label и вызвали радиокнопку с заданным значением, а с помощью span мы дали ответ.
• Точно так же мы сделали это для всех вариантов и для всех вопросов.
• Просмотрите приведенный ниже код и запустите его в нашем IDLE перед CSS Styling.

<ul class="quiz">
    <li>
        <h4>How many letters are there in "JS"?</h4>
        <ul class="choices">
            <li>
                <label
                    ><input type="radio" name="question0" value="A" /><span
                        >2</span
                    ></label
                >
            </li>
            <li>
                <label
                    ><input type="radio" name="question0" value="B" /><span
                        >1</span
                    ></label
                >
            </li>
            <li>
                <label
                    ><input type="radio" name="question0" value="C" /><span
                        >3</span
                    ></label
                >
            </li>
            <li>
                <label
                    ><input type="radio" name="question0" value="D" /><span
                        >4</span
                    ></label
                >
            </li>
        </ul>
    </li>
    <li>
        <h4>How many letters are there in "BMX"?</h4>
        <ul class="choices">
            <li>
                <label
                    ><input type="radio" name="question1" value="A" /><span
                        >2</span
                    ></label
                >
            </li>
            <li>
                <label
                    ><input type="radio" name="question1" value="B" /><span
                        >1</span
                    ></label
                >
            </li>
            <li>
                <label
                    ><input type="radio" name="question1" value="C" /><span
                        >3</span
                    ></label
                >
            </li>
            <li>
                <label
                    ><input type="radio" name="question1" value="D" /><span
                        >4</span
                    ></label
                >
            </li>
        </ul>
    </li>
    <li>
        <h4>How many letters are there in "A"?</h4>
        <ul class="choices">
            <li>
                <label
                    ><input type="radio" name="question2" value="A" /><span
                        >2</span
                    ></label
                >
            </li>
            <li>
                <label
                    ><input type="radio" name="question2" value="B" /><span
                        >1</span
                    ></label
                >
            </li>
            <li>
                <label
                    ><input type="radio" name="question2" value="C" /><span
                        >3</span
                    ></label
                >
            </li>
            <li>
                <label
                    ><input type="radio" name="question2" value="D" /><span
                        >4</span
                    ></label
                >
            </li>
        </ul>
    </li>
</ul>
<button class="view-results" onclick="returnScore()">View Results</button>
<span id="myresults" class="my-results">My results will appear here</span>

Вывод только HTML-кода:

Викторина с несколькими вариантами ответов в HTML-коде[/caption]

Код CSS для оформления викторины с множественным выбором: -

С помощью дизайна CSS мы создадим всю нашу страницу, это просто тест, поэтому мы просто добавим цвет фона, цвет кнопки и семейство шрифтов для всего тела.

И установите отступы вопросов и вариантов, чтобы они не путались и выглядели в систематическом порядке.

Анализу поможет приведенный ниже код CSS. После добавления этого файла в rel-тег ссылки дождитесь результатов.
Мы добавим некоторые базовые стили к нашему приложению-викторине, используя селектор по умолчанию, и мы добавим стили к различным элементам приложения-викторины, используя класс селектор. Наше приложение-викторина будет иметь поля и отступы.

html {
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
body {
    font-family: sans-serif;
    padding: 1rem;
    background-color: orange;
}
.quiz,
.choices {
    list-style-type: none;
    padding: 0;
}
.choices li {
    margin-bottom: 5px;
}
.choices label {
    display: flex;
    align-items: center;
}
.choices label,
input[type="radio"] {
    cursor: pointer;
}
input[type="radio"] {
    margin-right: 8px;
}
.view-results {
    padding: 1rem;
    cursor: pointer;
    font-size: inherit;
    color: white;
    background: teal;
    border-radius: 8px;
    margin-right: 5px;
}
.my-results {
    padding: 1rem;
    border: 1px solid goldenrod;
}

это простой код css. мы не добавляем какой-либо тяжелый код css, потому что наша главная цель — создать функциональность вопросов с несколькими вариантами ответов (MCQ). если вам нужно больше лучшего пользовательского интерфейса, вы можете добавить больше кода CSS в этот раздел css.

Вывод кода HTML + Css:

Код викторины JavaScript с несколькими вариантами ответов: -

В разделе JavaScript мы добавим логику для инициализации нашей страницы. Логика должна знать, что правильно, а что неправильно. Поэтому мы определим там правильный вариант, а затем установим, что когда пользователь нажимает кнопку, логика будет генерировать и сообщать пользователю о его/ее счете.

Приведенный ниже код JavaScript сообщит вам об этой логической ссылке в теге script src вашего HTML-кода:

var answers = ["A", "C", "B"],
    tot = answers.length;
function getCheckedValue(radioName) {
    var radios = document.getElementsByName(radioName);
    for (var y = 0; y < radios.length; y++)
        if (radios[y].checked) return radios[y].value;
}
function getScore() {
    var score = 0;
    for (var i = 0; i < tot; i++)
        if (getCheckedValue("question" + i) === answers[i]) score += 1;
    return score;
}
function returnScore() {
    document.getElementById("myresults").innerHTML =
        "Your score is " + getScore() + "/" + tot;
    if (getScore() > 2) {
        console.log("Bravo");
    }
}

Благодаря этому блогу мы узнали, как создавать тесты с несколькими вариантами ответов с использованием HTML, CSS и JavaScript.

Теперь жду положительных отзывов с вашей стороны.

Итак, как прошел блог Learners,

Если вам нужен более интересный блог, пожалуйста, проверьте наши сайты блогов. Оставайтесь с нами, потому что каждый день вы будете узнавать здесь что-то новое.

Я надеюсь, что смог помочь вам понять эту тему и что вы узнали что-то новое из этого блога. Если вы столкнулись с какими-либо трудностями, не стесняйтесь обращаться к нам с помощью поля для комментариев, и если вам понравилось, пожалуйста, покажите свою любовь в разделе комментариев. Это наполняет сердца блоггеров энтузиазмом писать больше новых блогов.

Счастливого кодирования

Автор @Harsh_9

Какой редактор кода вы используете для этой викторины с несколькими вариантами ответов?

Я лично рекомендую использовать VS Code Studio, он очень прост и удобен в использовании.

Является ли этот проект с множественным выбором адаптивным или нет?

Да! Этот проект викторины с множественным выбором является адаптивным.

Используете ли вы какие-либо внешние ссылки для создания этого проекта?

Нет! Эта викторина с множественным выбором сделана на Pure Html, Css и JavaScript Code.