код программы кнопки тест

За рисунок на кнопке отвечает свойство Kind. Сперва изменяете это свойство на нужное, а затем в Caption прописываете то, что будет написано на кнопке.

Формы

Размер формы выберите свой, в зависимости от длин вопросов и ответов.В BorderStyle выберите BsSingle. Так же рекомендую установить в false все свойства BorderIcons, чтобы закрытие приложения мы контролировали сами. На первой форме можно оставить в true подсвойство biMinimize. В свойстве Position выберите poDesktopCenter, чтобы форма появлялась на середине экрана.

Свойство AutoSize в false, чтобы кусок последней буквы не отсекался(актуально для формы с приветствием,справкой и результатами, для формы с тестированием лучше это свойство оставить в true). На форме с результатами слова «Вы набрали» и «баллов» пишутся в отдельных лейблах.
За цвет, размер и тип текста отвечает свойство Font(color, size, name). Для тестирования я использовал шрифт Verdana. Для отображения надписей на других формах-Monotype Corsiva.

Важно!
Текст модуля нельзя копировать напрямую, т.к. это вызовет ошибки при компиляции(относится к обработчикам событий). Следует сперва щелкнуть, например, по кнопке, а затем вставить код:

Пример для BitBtn1 :

Щелкаем дважды по кнопке BitBtn1, появится:

void __fastcall TForm3::BitBtn1Click(TObject *Sender)
<

Затем между фигурными скобкам вставляем код:

Form1->Close();
Form2->Close();
Form3->Close();
Form4->Close();

И в итоге получаем:

void __fastcall TForm3::BitBtn1Click(TObject *Sender)
<
Form1->Close();
Form2->Close();
Form3->Close();
Form4->Close();
>

Unit1.cpp

#include
#pragma hdrstop

extern int pravil_otvet;//переменная, для хранения правильного ответа к вопросу

Form2->Label5->Caption=»Как называют манекенщицу супер-класса?»;
Form2->Label1->Caption=»Топ-модель»;
Form2->Label2->Caption=»Тяп-модель»;
Form2->Label3->Caption=»Поп-модель»;
Form2->Label4->Caption=»Ляп-модель»;
pravil_otvet=1;//присваиваем номер правильного ответа

#include
#pragma hdrstop

int s=0, i=0, pravil_otvet, nomer=0;// s- сумма правильных ответов, i- вспомогательная переменная, nomer- номер текущего вопроса

void __fastcall TForm2::N1Click(TObject *Sender)
<
Form4->Visible=true;
>
//—————————————————————————
void __fastcall TForm2::BitBtn2Click(TObject *Sender)
<
Form2->Visible=false;
Form3->Visible=true;
Form3->Label2->Caption=s;
>
//—————————————————————————
void __fastcall TForm2::BitBtn1Click(TObject *Sender)
<
if(RadioButton1->Checked==true)i=1;//проверяем, какой ответ был выбран
if(RadioButton2->Checked==true)i=2;
if(RadioButton3->Checked==true)i=3;
if(RadioButton4->Checked==true)i=4;
if(i==pravil_otvet)s++;//если выбранный и правильный совпадают, то увеличиваем сумму на единичку
i=0;//обнуление требуется для корректного подсчета суммы

RadioButton1->Checked=false;//очищаем нажатую кнопку
RadioButton2->Checked=false;
RadioButton3->Checked=false;
RadioButton4->Checked=false;

nomer++;//номер вопроса изменяется с каждым нажатием кнопки

switch(nomer)
<
case 1:
Form2->Label5->Caption=»Кто вырос в джунглях среди диких зверей?»;
Form2->Label1->Caption=»Колобок»;
Form2->Label2->Caption=»Маугли»;
Form2->Label3->Caption=»Бэтмен»;
Form2->Label4->Caption=»Чарльз Дарвин»;
pravil_otvet=2;
break;

case 2:
Form2->Label5->Caption=»Как называлась детская развлекательная программа, популярная в прошлые годы?»;
Form2->Label1->Caption=»АБВГДейка»;
Form2->Label2->Caption=»ЁКЛМНейка»;
Form2->Label3->Caption=»ЁПРСТейка»;
Form2->Label4->Caption=»ЕЖЗИКейка»;
pravil_otvet=1;
break;

case 3:
Form2->Label5->Caption=»Как звали невесту Эдмона Дантеса, будущего графа Монте-Кристо? «;
Form2->Label1->Caption=»Мерседес»;
Form2->Label2->Caption=»Тойота»;
Form2->Label3->Caption=»Хонда»;
Form2->Label4->Caption=»Лада»;
pravil_otvet=1;
break;

case 4:
Form2->Label5->Caption=»Какой цвет получается при смешении синего и красного?»;
Form2->Label1->Caption=»Коричневый»;
Form2->Label2->Caption=»Фиолетовый»;
Form2->Label3->Caption=»Зелёный»;
Form2->Label4->Caption=»Голубой»;
pravil_otvet=2;
break;

case 5:
Form2->Label5->Caption=»Из какого мяса традиционно готовится начинка для чебуреков?»;
Form2->Label1->Caption=»Баранина»;
Form2->Label2->Caption=»Свинина»;
Form2->Label3->Caption=»Телятина»;
Form2->Label4->Caption=»Конина»;
pravil_otvet=1;
break;

case 6:
Form2->Label5->Caption=»Какой народ придумал танец чардаш?»;
Form2->Label1->Caption=»Венгры»;
Form2->Label2->Caption=»Румыны»;
Form2->Label3->Caption=»Чехи»;
Form2->Label4->Caption=»Молдаване»;
pravil_otvet=1;
break;

case 7:
Form2->Label5->Caption=»Изучение соединений какого элемента является основой органической химии?»;
Form2->Label1->Caption=»Кислород»;
Form2->Label2->Caption=»Углерод»;
Form2->Label3->Caption=»Азот»;
Form2->Label4->Caption=»Кремний»;
pravil_otvet=2;
break;

case 8:
Form2->Label5->Caption=»Кто открыл тайну трёх карт графине из «Пиковой дамы» А. С. Пушкина?»;
Form2->Label1->Caption=»Казанова»;
Form2->Label2->Caption=»Калиостро»;
Form2->Label3->Caption=»Сен-Жермен»;
Form2->Label4->Caption=»Томас Воган»;
pravil_otvet=3;
break;

case 9:
Form2->Label5->Caption=»В какой стране была пробурена первая промышленная нефтяная скважина?»;
Form2->Label1->Caption=»Кувейт»;
Form2->Label2->Caption=»Иран»;
Form2->Label3->Caption=»Ирак»;
Form2->Label4->Caption=»Азербайджан»;
pravil_otvet=4;
break;

case 10:
BitBtn1->Enabled=false;
RadioButton1->Enabled=false;//делаем кнопки «не нажимаемыми», чтобы пользователь нажал на «закончить тест»
RadioButton2->Enabled=false;
RadioButton3->Enabled=false;
RadioButton4->Enabled=false;
>
>
//—————————————————————————

#include
#pragma hdrstop

#include
#pragma hdrstop

void __fastcall TForm4::BitBtn1Click(TObject *Sender)
<
Form4->Visible=false;//скрываем форму справки после просмотра
>
//—————————————————————————

Программа в процессе работе:

Если вам требуется вместе с вопросом показать изображение, то используйте компонент Image и его свойство Picture. Разместите на форме нужно количество этих компонентов и в каждый подгрузите нужную картинку. Для всех свойство Visible установите в false. Затем в нужном вопросе допишите код, например:

Form2->Label5->Caption=»Как звали невесту Эдмона Дантеса, будущего графа Монте-Кристо? «;
Form2->Label1->Caption=»Мерседес»;
Form2->Label2->Caption=»Тойота»;
Form2->Label3->Caption=»Хонда»;
Form2->Label4->Caption=»Лада»;
Form2->Image1->Visible=true;
pravil_otvet=1;
break;

Т.е. вы покажете изображение подгруженное в Image1. Но чтобы при переходе к следующему вопросу изображение убралось или заменилось новым, перед switch нужно дописать:

Form2->Image1->Visible=false;
Form2->Image2->Visible= false ;

В зависимости от количества ваших изображений. Это простой способ и поможет избежать отображения сразу двух изображений. Как вариант-дописать в следующем вопросе:

case 3:
Form2->Label5->Caption=»Как звали невесту Эдмона Дантеса, будущего графа Монте-Кристо? «;
Form2->Label1->Caption=»Мерседес»;
Form2->Label2->Caption=»Тойота»;
Form2->Label3->Caption=»Хонда»;
Form2->Label4->Caption=»Лада»;
Form2->Image1->Visible=true;
pravil_otvet=1;
break;

case 4:
Form2->Image1->Visible= false ; //скрываем
Form2->Label5->Caption=»Какой цвет получается при смешении синего и красного?»;
Form2->Label1->Caption=»Коричневый»;
Form2->Label2->Caption=»Фиолетовый»;
Form2->Label3->Caption=»Зелёный»;
Form2->Label4->Caption=»Голубой»;
Form2->Image2->Visible=true; //успешно скрыв старое изображение, показываем новое
pravil_otvet=2;
break;

Источник

Тесты для кода и код для тестов

В динамических языках, вроде python и javascript, возможно прямо во время работы заменять методы и классы в модулях. Это очень удобно для тестов — можно просто ставить «заплатки», которые будут исключать тяжёлую или ненужную логику в контексте данного теста.

Но что делать в C++? Go? Java? В этих языках код не получится модифицировать для тестов на лету, а создание заплаток требует отдельных инструментов.

В таких случаях стоит специально писать код так, чтобы он тестировался. Это не просто маниакальное стремление увидеть в своём проекте 100% покрытие. Это шаг к написанию поддерживаемого и качественного кода.

В этой статье я попробую рассказать об основных идеях, стоящих за написанием тестируемого кода и показать, как их можно использовать на примере простой программы на языке go.

Бесхитростная программа

Напишем бесхитростную программу для совершения запроса к API ВКонтакте. Это достаточно простая программа, которая формирует запрос, совершает его, считывает ответ, декодирует ответ из JSON в структуру и выводит результат пользователю.

Будучи профессионалами своего дела, мы решили, что необходимо написать тесты для нашего приложения. Создадим файл с тестами.

Выглядит не очень привлекательно. Эта проверка является простым запуском приложения, на который мы не можем повлиять. Мы не можем исключить работу с сетью, проверить работоспособность при различных ошибках и даже заменить токен для проверки не получится. Попробуем разобраться, как улучшить эту программу.

Паттерн «внедрение зависимости»

Добавив структуру, мы создали зависимость (ключ доступа) для приложения, которую можно передавать из разных источников, что позволяет избежать «вшитых» значений и упрощает тестирование.

Разделение получения информации и её вывода

Сейчас ошибку может приметить только человек, и то, только если он знает, каким должен быть вывод. Чтобы решить этот вопрос, необходимо не выводить информацию сразу в поток вывода, а добавить отдельные методы для получения информации и её вывода. Две эти независимые части будет легче проверять и поддерживать.

Изменим ShowUserInfo() так, чтобы он использовал GetUserInfo() и обрабатывал ошибки.

Теперь в тестах можно проверять, что от сервера приходит корректный ответ, а при неверном токене возвращается ошибка.

Настраиваемые альтернативы

Тесты для ShowUserInfo() напоминают то, от чего мы пытались уйти изначально. В этом случае единственный смысл метода — выводить информацию в стандартный поток вывода. С одной стороны, можно попробовать переопределять os.Stdout и проверять вывод, это выглядит как слишком избыточное решение, когда можно поступить более элегантно.

Поскольку возможность менять Writer для вывода будет использоваться редко, в основном для тестов, есть смысл задать значение по умолчанию. В go для этого мы поступим так — сделаем тип VKClient неэкспортируемым и создадим для него функцию-конструктор.

Теперь необходимо обновить тесты так, чтобы они создавали клиент с помощью конструктора и там, где надо, устанавливали другого Writer.

Для каждого теста, где мы что-то выводим, мы создаём буфер, который будет играть роль стандартного потока вывода. После выполнения функции происходит проверка, что результаты соответствуют нашим ожиданиям — с помощью регулярных выражений или простого сравнения.

Зачем я использую регулярные выражения? Чтобы тесты работали с любым корректным токеном, который я предоставлю программе, независимо от имени пользователя и его ID.

Паттерн «внедрение зависимости» — 2

Для каждой проблемной ситуации добавим по тесту. Они будут создавать подставные Networker с нужными настройками, в соответствии с которыми он будет выкидывать ошибку в определённый момент. После этого мы вызываем проверяемую функцию и убеждаемся, что ошибка произошла, и что мы ожидали именно эту ошибку.

С помощью поля RawBody можно избавиться от сетевых запросов (просто возвращать то, что мы ожидаем получить от ВКонтакте). Это может быть необходимо, чтобы избежать превышения лимитов запросов во время тестирования или для ускорения тестов.

Итоги

Каждый шаг по дороге к 100% покрытию увеличивал модульность, поддерживаемость и надёжность приложения, поэтому нет ничего плохого в том, что тесты диктовали структуру пакета.

Тестируемость любого кода — это качество, которое не появляется из воздуха. Тестируемость появляется тогда, когда разработчик адекватно использует паттерны в подходящих ситуациях и пишет настраиваемый и модульный код. Основной задачей было показать процесс мышления при выполнении рефакторинга программы. Аналогичное мышление может распространяться на любые приложения и библиотеки, а также и на другие языки.

Источник

Создание учебного теста с ответами при помощи HTML и JavaScript

В статье описывается последовательное создание учебного теста. Если вы не хотите читать о программировании, то сразу переходите в раздел с инструкциями по изменению теста и его загрузки.

Создание простого теста

Развитие информационных технологий и дистанционного образования приводит к необходимости создания электронных учебных тестов. Многие учителя и преподаватели сталкиваются с проблемой создания учебных тестов. Главная сложность решения данной задачи в том, что при создании таких электронным материалов требуется знание HTML и jаvascript.

Как решить эту проблему. Учитель может воспользоваться онлайн конструктором тестов или же попытаться создать тест самостоятельно на основе использования шаблона. Именно второй вариант мы рассмотрим в данной статье.

Мы сформируем простой шаблон, который можно будет потом размножить на несколько файлов и каждый превратить в отдельный тест.

Допустим имеется несложный математический тест, состоящий из нескольких задач по математике:

Примеры нужно вывести на экран и дать ученику возможность ввести ответ, дальше сравнить ответ с правильным и показать ученику процент правильно выполненного задания.

Сначала создадим HTML код задач:

Напротив каждой задачи учебного теста мы подставили поле для ввода текста. Подробнее о различных полях в HTML читайте в статье по ссылке. В конце мы добавили кнопку, при нажатии на которую должна произойти проверка того, что набрал ученик в ответах текста.

Обратите внимание на идентификаторы “z_1”,”z_2” и “z_3”. Если вам нужно добавить задачу 4, то нужно просто скопировать последнюю строку с задачей, заменить условие и в поле идентификатора написать “z_4”.

В последней строке мы покажем результат выполнения заданий после проверки.

На следующем этапе нужно создать jаvascript код, который сравнит то, что набрал ученик с правильными ответами и подсчитает процент выполнения задач.

Первые три строки будут содержать правильные ответы. Четвертая и последующие задачи в тест добавляются путем копирования последней строки с ответом, подстановки числа 4 вместо 3 и указанием правильного ответа.

Теперь нужно узнать то, что ввел ученик в ответах. Для этого используем следующий код.

otv_uch_1 = document.getElementById(‘z_1’).value;
otv_uch_2 = document.getElementById(‘z_2’).value;
otv_uch_3 = document.getElementById(‘z_3’).value;

Четвертая задача будет означать новую строку с заменой цифр 3 на 4.

Далее нужно сравнить ответы ученика с правильными ответами. Если ответы будут совпадать, то за каждую задачу теста нужно добавить 1 балл.

ball = 0;
if(otv_uch_1 == pr_otv_zadachi_1) <
ball +=1;
>
if(otv_uch_2 == pr_otv_zadachi_2) <
ball +=1;
>
if(otv_uch_3 == pr_otv_zadachi_3) <
ball +=1;
>

Для добавления задачи 4 вам потребуется скопировать последние три строки и заменить цифры в них на 4.

Теперь нужно посчитать процент правильных ответов.

В этой строке мы указываем сколько всего задач в учебном тесте. Если вы добавили еще, то нужно исправить эту цифру.

procent_vip = ball/vsego_zadach * 100;

Затем нужно вывести ответ на экран.

document.getElementById(‘rezultat’).innerHTML = “Задания выполнены верно на ”+procent_vip+”%.”;

Вот и все. Теперь объединим весь код в одну HTML страницу.

Тест из нескольких задач по математике

Источник

Как создавать тесты и викторины на JavaScript

Разбираемся, как создавать тесты и викторины для сайта на ванильном JavaScript.

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

Чтобы их создать, можно воспользоваться сторонними сервисами, но разве это когда-нибудь останавливало хоть одного разработчика? С любовью изобретать велосипеды мы создадим собственный код для встраивания тестов на страницы.

Репозиторий проекта на GitHub

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

Вёрстка страницы

Тест мы поместим в файл quiz.html, чтобы его можно было вставлять с помощью iframe в другие страницы. Давайте сверстаем тест:

Теперь добавим стили:

В файл index.html добавим iframe, чтобы подключить тест:

Смотрим, что получилось:

Наверху находится сам вопрос, под ним — варианты ответов, а в самом низу — прогресс прохождения теста.

Создаём классы

Тест будет работать с помощью следующих классов:

Когда классы готовы, можно инстанцировать объекты (создавать экземпляры):

Здесь создан только один вопрос, чтобы не отвлекать повторяющимся кодом. Вы можете добавить их столько, сколько вам необходимо.

Остаётся только прописать логику взаимодействия с пользователем:

Смотрим, что получилось:

Когда пользователь завершит тест, то увидит свой результат:

Особенности создания разных тестов

Как вы могли заметить, это очень простой тест. Он пригодится, чтобы пользователи могли проверить, насколько хорошо они усвоили материал. Ну или просто для веселья — вот несколько тем для развлекательных тестов:

Всё это может быть очень забавным и вовлекающим, если учитывать особенности своей аудитории. Например, для программистов есть интересные тесты на сайте tproger.ru.

Другое дело, если у вас образовательная платформа и результаты теста влияют на итоговую оценку. В этом случае данные о правильных ответах нужно хранить на сервере. Иначе их можно подсмотреть через консоль разработчика:

То же самое касается и таймеров: если вы даёте ограниченное время на прохождение теста, то время начала отсчёта должно храниться на сервере, а не в JS-коде.

Заключение

С помощью кода из статьи можно создавать сколько угодно тестов. Разве что для каждого придётся дублировать файл app.js, чтобы указать новые вопросы.

Исправить это можно с помощью HTTP-запросов — вопросы будут храниться на сервере и отправляться пользователю в виде JSON. Это очень распространённая практика в веб-разработке, которую нужно знать каждому разработчику.

Если вы хотите лучше освоить JavaScript, то можете записаться на наш курс по Frontend-разработке.

Frontend-разработчик

Ноутбук, ваши навыки и знания, а также стабильный интернет — это всё, что нужно для эффективной работы. Толковые веб-разработчики высоко ценятся в международных компаниях и часто получают приглашения о работе. На курсе вы научитесь верстать сайты и создавать интерфейсы, а также соберёте два проекта в портфолио и получите современную профессию.

Источник

MnogoBlog

как создать сайт на wordpress, настроить и оптимизировать wordpress

Как создать тест или опрос на JavaScript

Здравствуйте, давайте создадим тест и опрос на html, который будет состоять из 3 вопросов и 6 ответов в каждом из них и обработаем их результаты с помощью javascript.

Для того чтобы узнать какой товар (услуга) пользуется наибольшим спросом на данный момент времени применяют различные опросы и тесты.
Как только вы сможете проанализировать результаты тестов и опросов – начинайте рекламировать ваш товар (услугу) – лучше всего для этого подойдет Яндекс.Директ – идеальная площадка для размещения рекламы на просторах Рунета. Ежедневно эту сеть посещает свыше 5 миллионов пользователей в России и других странах СНГ, поэтому частотность показов релевантных объявлений достаточно высокая. А для того чтобы ваша реклама была максимальна эффективна, то лучше всего обратиться по настройке Яндекс.Директа к профессионалам от Direct-UP – dircet-up.ru. Удачного вам бизнеса!

1. Создаем тест на JavaScript:

Тест будет состоять из 3 вопросов, вы можете установить правильный ответ в каждом из вопросов и в зависимости от набранных баллов перенаправить посетителя на разные страницы.

Рассмотрим код первого вопроса:

Здесь правильный ответ помечен значением value2, все остальные имеют значение value1.

Теперь давайте посмотрим на простой оператор if, который мы используем в JavaScript, чтобы найти сколько же набрано правильных ответов в тесте:

В принципе, мы проверяем только значение value2 и в зависимости от его количества выставляем оценку.

После того, как мы узнали оценку, то можем перенаправить посетителя на разные странички, в зависимости от результата:

Например, перенаправить посетителя на страничку /ocenka2.html.

Вот готовый код файл index.html:

2. Создаем простой опрос на javaScript:

Рассмотрим код первого вопроса:

Затем мы повторяем этот шаблон для каждого вопроса.

Теперь давайте посмотрим на простой оператор if, который мы используем в JavaScript, чтобы найти ответ с наибольшим значением:

В принципе, мы проверяем, что сумма всех ответов со значением value1 выше суммы других возможных вариантов, а также что она выше 0.

Мы выполняем одинаковую проверку для каждого значения.

После того, как мы знаем, самое высокое значение, мы можем использовать этот результат, например, чтобы перенаправить посетителя на разные url:

Так если в большинстве вопросов был выбран ответ под цифрой 1, то result = value1 и соответственно посетитель попадет на страничку value1.html.

Источник