Часто возникает вопрос, как организовать онлайн опрос или тестирование, где пользователь отправив форму, получит результат, в зависимости от того, какие он выбрал ответы. Каждый ответ имеет определённую оценку/балл. Пользователь, набрав какое-то количество баллов, в зависимости от градации, получит соответствующий результат.
В этой статье мы хотим Вам рассказать о том, как создать онлайн тестирование с подсчётом суммы баллов и выводом результатов, в зависимости от количества набранных баллов. Для этого мы создадим импровизированную форму тестирования, где рассмотрим такие вопросы:
- Создание и наполнение формы тестирования;
- Настройка логических правил для ветвления формы;
- Настройка формулы подсчета суммы баллов;
- Настройка вывода результатов тестирования.
В качестве примера разработаем форму, для оценки качества работы автомойки. Для этого создадим многостраничную форму, где с помощью логических правил настроем поэтапный вывод вопросов, переход между страницами, подсчет суммы баллов и вывод результатов тестирования.
Пишем сами программу учета и приема заказов
Создание формы онлайн тестирования
Сначала создадим форму, для этого в личном кабинете нажмите кнопку создать форму:
Выберите из списка — “Другая форма”:
Введите название формы и нажмите кнопку “Создать”:
Дадим название нашей форме “Оцени работу нашей автомойки”. Сделаем форму из нескольких страниц, с несколькими переключателями и чекбоксами, где при выборе определённого ответа будет отображаться необходимый элемент, согласно правилам логики. Добавим “Переключатели” на первую страницу, перетащив элемент с основных полей или просто кликнув на данный элемент:
Также сделаем форму из нескольких страниц, нажав иконку “Добавить страницу”:
Аналогично, на добавленную страницу, добавим необходимые элементы в виде чекбоксов (множественный выбор) для нашего тестирования:
Чтобы настроить названия элементов и варианты ответов, нажмите кнопку редактировать:
На четвёртой странице добавим «Поле для ввода email-адреса» и «ФИО», которые расположим в секцию, для вывода в одну строку:
Складской учет в Excel. Программа Склад: Продажи
.png)
Также на этой странице добавим элемент “Формула” из экстра полей и элемент “Скрытое поле” из дополнительных полей.
В настройках “Параметры страниц” можно указать название страниц:
А также здесь можно настроить отображение страниц: в виде вкладок и в виде индикаторов заполнения, либо просто скрыть:
Настройка логического ветвления
Далее перейдём в раздел “Логика”, чтобы добавить необходимые правила для полей формы. Для этого нажмите кнопку добавить правило:
Добавим правило для элементов на первой странице:
Выберем условие: если “Вы у нас мыли машину” и вабран ответ — “Да”, то показать элемент “Как часто вы заезжаете на мойку”:
Т.е. на первой странице начнётся тестирование с первого вопроса, а остальные будут появляться после заполнения. Теперь добавим правило для второго вопроса “Как часто Вы заезжаете на мойку”, которое пошло по ветке ответа “Да” от первого вопроса.
Выберем условие, что если “Как часто Вы заезжаете на мойку”, выбран первый вариант ответа “Раз в неделю”, то показать ”Какую мойку заказывали”. Но так у нас несколько вариантов ответа, и при их выборе мы должны перейти всёравно к вопросу “Какую мойку заказывали”, то мы должны связать условие с помощью логического “ИЛИ”. Для этого нажмите иконку “Добавить условие”:
По умолчанию стоит значение “И”, чтобы его изменить, кликните на список и выберите значение “ИЛИ”:
Таким же образом добавим условия для остальных ответов с помощью логического “ИЛИ”:
В результате, после добавления двух правил для первой странице, пользователь, выбрав ответ “Да” на первый вопрос, перейдёт ко второму вопросу, где при выборе любого (использовали логическое “ИЛИ”) варианта ответа пользователю откроется следующий вопрос. Для второй страницы, аналогичным образом, добавим логическое правило для вопроса “Как Вы оцениваете уборку салона”.
В итоге, для двух страниц, набор правил будет иметь вид:
На третьей странице добавили 3 вопроса, состоящие из переключателей с вариантами ответов “Да” или “Нет”.
Здесь не будем делать логических ответвлений, т.е. при выборе одного из этих вариантов ответов, пользователю будет отображаться просто следующий вопрос на этой странице.
На пятой странице мы разместили элементы «Текстовая область», где пользователь сможет оставить пожелания и предложения, и «Текст» со словами благодарности. На вкладке логика добавим логические правила для первого вопроса “Вы у нас мыли машину” с первой страницы, когда выбрали “нет”, то показать элемент “если нет”.
И ещё одно правило, где пользователь при выборе любого варианта ответа в вопросе “если нет”, перейдёт сразу на пятую страницу формы с возможностью оставить свои пожелания и предложения:
Настройка формулы подсчета суммы баллов
Первый вариант вывода результатов
На четвёртой странице мы расположили два элемента: “Формула” и ”Скрытое поле”, которые будем использовать для подсчёта результата и для передачи полученного значения, соответственно. Теперь зайдём в настройки элемента “Формула”, который мы добавили на четвёртую страницу формы. Элемент “Формула” будем использовать для подсчёта баллов, в зависимости от выбранных вариантов ответа в заданных вопросах. Для этого нажмите значок редактирования элемента:
Чтобы тестируемому пользователю не было доступно поле “Формула”, которое будем использовать для расчёта, необходимо скрыть этот элемент. В режиме редактирования элемента в поле “Имя CSS класса”, пропишем значение “hide”:
Теперь перейдём к самой настройке формулы расчёта. Для этого нажмите кнопку серого цвета “Настройка формулы” и перед вами откроется редактор формулы. Справа кликните “Добавить элемент”:
Выберем из списка первый элемент “Вы у нас мыли машину”:
В редакторе формулы появиться первый элемент, который участвует в подсчёте баллов. Мы будем суммировать все значения, поэтому сложим таким же образом все элементы, участвующие в подсчёте:
После того, как добавили все элементы, нажмите шестерёнку справа от элемента:
В первом вопросе у нас ответы “Да” или “Нет”, назначим баллы 1 и 0:
Далее назначим баллы за ответы в других элементах, участвующие в формуле подсчёта:
Настройка вывода результатов тестирования
Добавив необходимые баллы в элементы формулы расчёта, переходим в раздел “Логика”, где добавим логические правила для скрытого поля. Мы будем передавать в это поле значение, которое опишем в логических правилах. Предварительно подсчитав баллы в формуле и решив, что диапазон значений будет соответствовать трём результатам:
- Неудовлетворительно — диапазон 0 — 15 баллов;
- Удовлетворительно — диапазон 16 — 24 баллов;
- Положительно — диапазон 25 и выше баллов.
Теперь реализуем, с помощью логики, передачу этих результатов в скрытое поле. В условии выберем, если значение элемента “Формула” больше чем “0”:
То установить в элемент “Скрытое поле” значение — “Неудовлетворительно”, при этом добавим условие через логическое “И”:
Что значение формулы меньше чем “16”:
Т.е. получим первый диапазон значений 0-15:
Аналогичным образом добавим ещё 2 правила для остальных результатов:
Теперь организуем вывод значений скрытого поля на странице благодарности. Заходим в основные настройки формы:
Выберем в “Действии при успешном заполнении формы” — показывать текст на отдельной странице:
.png)
И после слов, как раз выведем результат нашего опроса. Будем использовать “макрос” скрытого поля из списка переменных значений. Чтобы найти макрос, нажмите значок <. >, и в открывшемся окне кликните слева на значение скрытого поля:
Получаем ранее указанный текст, со значением скрытого поля, в которое, с помощью логики, будет подставляться результат тестирования, соответствующий заданному диапазону баллов:
Нажав значок просмотра формы, Вы можете просмотреть настроенную форму:
Где в тексте, после отправки формы будет выведен результат опроса/тестировании, в нашем случае — как оценили клиенты работу автомойки.
Второй вариант вывода результатов ответов (появился после доработки конструктора), можно реализовать с помощью правил в логике для результатов формы.
Перейдите в раздел «Логика» и откройте пункт раздела «Правила для результатов формы»:
Нажмите кнопку «Добавить правило» и добавьте аналогичные правила, как мы выше делали и необходимый текст:
Аналогичным образом, добавим ещё 2 правила и получим в итоге 3 правила для отображения разных шаблонов текста, в зависимости от значения формулы:
В разделе «Тема оформления» вы можете выбрать одну из шаблонных тем оформления, либо отредактировать на свой вкус.
При необходимости вы также можете настроить отправку результатов тестирование на email пользователю. Для этого нужно в настройках формы активировать «E-mail уведомления для пользователя (автоответчик)», где в шаблоне уведомления можно также использовать макрос скрытого поля с результатом тестирования. Кроме этого, вы можете настроить отдельные логические правила для email уведомлений и там настроить отдельные шаблоны с результатами в зависимости от сумму баллов.
Надеемся данный материал будет для вас полезным. Оставляйте свои комментарии в форме ниже!
- Стартовая страница для квиза и викторины
- Модуль интеграции FormDesigner с Webex
- Блочный редактор для ветвления страниц
- Новый тип календаря для онлайн записи и бронирования
Источник: formdesigner.ru
Создаем калькулятор-конвертер на базе React. Часть 2: Базовый интерфейс калькулятора
Продолжаем создавать собственный смарт-калькулятор на базе Реакта. В этой части сделаем базовый интерфейс для подсчета простых выражений при помощи экранной клавиатуры. Разберем основы фреймворка и примитивные возможности визуальной бибилиотеки Chakra UI.
Создаем первый собственный React-компонент
В Реакте все элементы интерфейса отрисовываются при помощи компонентов в формате JSX (это гибрид форматов, позволяющий прописывать логику и базовую верстку в одном блоке кода). И мы сейчас создадим свой компонент, а точнее отредактируем уже существующий, заменив весь код на собственный.
Работать мы будем в файле App.jsx – это точка доступа. То есть ключевой файл, который отображается в HTML-верстке нашего приложения. Все дополнительные компоненты вкладываются в App и только после этого становятся доступны пользователю. Сам App представляет собой JavaScript-функцию.
Так что наше приложение в первую очередь будет описано в файле App.jsx. Оттуда и начнем.
- Открываем файл App.jsx (он находится в директории src проекта create-react-app).
- Удаляем весь существующий код внутри функции App кроме div’a с классом App.
- Импортируем в нашу программу тег Box из библиотеки Chakra UI:
Теперь мы можем использовать объект Box для отрисовки интерфейса. Это абстрактный тег, использующийся в качестве альтернативы для div. Зачем стандартным тегам вообще нужна альтернатива, вы скоро поймете.
-
Затем для примера создаем обертку Box:
Ее внутренности заменим на еще один блок из Чакры. На этот раз Text. Только его сначала тоже нужно импортировать. И здесь становится ясно, в чем преимущество компонентов Чакры над стандартными тегами HTML. Мы можем управлять их визуальной составляющей прямо в разметке интерфейса, не переходя к другим файлам.
В классическом варианте Реакта стили прописываются в отдельном файле, так же, как в случае с простым стеком HTML, CSS и JS. Chakra UI позволяет все важные составляющие разработки объединить в одной среде.
На скриншоте ниже видно, что я поменял фон у Box и размер текста у Text. Значения можно использовать как стандартные (доступные в CSS), так и специальные, доступные в Чакре (они создавались на основе фреймворка Tailwind).
Это пример элементарного Реакт-приложения. Оно пока ничего не делает, кроме отображения текста, но мы только начинаем.
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Добавляем цифры
Очевидно, чтобы от калькулятора был прок, нужны цифры. Для их добавления импортируем еще один элемент из Чакры. На этот раз Button. Все импортированные элементы на текущий момент будут выглядеть следующим образом:
Следующий шаг – создание функции, которая будет непосредственно рисовать интерфейс с цифрами (напоминаю, что в Реакте все элементы интерфейса это либо классы, либо функции – мы используем функции в угоду удобства).
Вот как она может выглядеть:
-
Начинаем с объявления функции (что такое props, скоро разберем).
function Numbers (props)
const nums = Array.from(Array(10).keys()).map( number => >
Пока это пустые блоки без контента. Чтобы в них появился контент, надо прописать внутри значение number, являющееся переменной в выражении map.
key – это атрибут, необходимый для корректной перерисовки компонентов в интерфейсе Реакта. У каждого элемента в списках должен быть уникальный ключ.
Так как в функции map мы возвращаем Button, то получаем в ответ 10 кнопок, который можно отобразить в интерфейсе, сделав возврат из функции Numbers. Из нее мы вернем Box со всеми числами, описанными выше.
return
Функция является компонентом, и этот компонент можно добавить в другую функцию, чтобы отрисовать его в интерфейсе программы. Например, в нашем случае пользователь видит только содержимое App, а Numbers для него скрыт.
Это легко исправляется добавлением специального тега в код App. Просто пишем в div . Такой вид тегов обозначает, что в функцию добавлен компонент. Теперь в App отображается вся логика, описанная в Numbers.
Теперь можно потратить немного времени на базовую стилизацию.
- Нам нужно указать точный размер кнопок с цифрами. Поэтому указываем атрибуты w и h для элемента Button внутри Numbers.
- Также стоит сократить размер всего блока с цифрами. Поэтому укажем точное значение ширины для элемента Box внутри Numbers.
- Компонент стоит обернуть в Box, чтобы центрировать его и не дать остальным элементам интерфейса разъехаться по экрану.
На текущем этапе получится подобный набор кнопок. Пока они неактивны и не выполняют никакой функции, но понажимать их уже можно. Chakra UI даже стилизовала их для нас, сделав меняющийся фон при наведении.
Добавляем логику подсчета выражений
Теперь надо научить калькулятор считать хотя бы базовые выражения. Поделим эту работу на несколько частей.
- Создадим внутри App логику для отображения введенных значений и результата вычислений.
- Добавим в Numbers функцию передачи цифр в поле для подсчета результатов.
- Добавим клавиши для сложения, умножения, деления и вычитания чисел.
- Автоматизируем процесс подсчета (создадим систему моментального вывода результата).
- Реализуем кнопку «Равно» для ручного вывода результата выражения.
Начнем с первой задачи и сразу же разберем одну из важнейших концепций Реакта. Каждый компонент в интерфейсе на базе React имеет состояние. Это какое-то значение, которое при изменении влияет на визуальную составляющую программы. Грубо говоря, если у вас есть программа для подсчета выпитых стаканов воды, то как раз поглощенный литраж и будет состоянием интерфейса.
В нашем случае будет два состояния. Одно для значений в поле подсчета результатов и одно для самого результата вычислений.
-
Импортируем в наше приложение функцию useState:
import < useState >from ‘react’
const [counts, setCounts] = useState(‘0’)
const [result, setResult = useState(»)
Логика тут довольно простая. В массиве хранится переменная со значением состояния и функция set для изменения переменной.
А в useState хранится значение по умолчанию. Пока этого знать достаточно.
Далее сделаем интерфейс для отображения поля с подсчетом и поля с результатом работы калькулятора. Можете стилизовать их как угодно, но я предпочитаю создавать имитацию единого поля, как в обычных калькуляторах, поэтому объединяю переменные count и result в один Box, а потом разбрасываю их по краям с помощью свойства justifyContent=»space-between». Сами переменные рекомендую обернуть в блоки Text и задать им динамическую ширину w=»fit-content». Тогда они точно займут нужное пространство в интерфейсе.
Теперь поговорим о пропсах (аргумент props, что мы видели ранее в функции Numbers). Это атрибут, позволяющий передать информацию из одного компонента в другой. Мы словно говорим одной функции из другой, что у нас есть определенные данные и методы, которые ты тоже можешь использовать. Так в Реакте и других фреймворках выстраиваются взаимоотношения между различными элементами интерфейса (даже далекими и не особо зависящими друг от друга).
Как создать программу для подсчета данных
Популярное
- 9. Массивы. Нахождение максимального и минимального числа в массиве.
- 6. Решение квадратного уравнения на C#, убираем ошибки.
- 12. Классы, конструкторы, методы в C#. Транспонирование матриц.
- 18. Шифр Цезаря на C#
- 3. Типы данных в C#
Главное меню
- Главная
- Любимые книги
- Рецензии на книги
- Рецензии на фильмы
- Любимые стихи
- Игры
- Блог обо всём
- Психология
- Компьютерная наука
- Заработок в интернете
- Притчи
Вот и я
- Благодарности
- Создать сайт
- Программируем на C#
- Изучаем WPF
- Статьи
- Моё творчество
Здесь был я
- Ховринская больница
- Выставка цифрового искусства
- Кладбище самолётов
- Усадьба Опалиха
- Заброшенный ВВЦ
- Музей Техники Вадима Задорожного
Авторизация
| KostyeFromHelen |
| 16. Разработка налогового калькулятора на C# |
| 18.11.2011 07:28:34 | |
|
Давайте более профессионально разберём как создаются программы на C#, а именно, мы ответим на следующие вопросы:
Ну и пока хватит, более точное задание можно скачать по ссылке. Советую всем скачать, ибо полное задание очень большое. И так начнём. Задание 1.Бизнес требования к программе налоговый калькулятор: Функциональные требования к программе налоговый калькулятор: Бизнес требования — это требования, описывающие, какие бизнес функции будут реализованы или улучшены. Задача 2.Для начала разберёмся какие модели жизненного цикла существуют: 1. Каскадно-водопадная модель жизненного цикла. Проблема в том, что если на стадии разработки кода мы решим что-то переделать, то нам придётся делать всё заново. 2. Какскадно-водопадная с возвращениями. Улучшенная первая, так как мы на каждом этапе можем вернуться на шаг назад, а не начинать всё заново. 3. Спиральная модель жизненного цикла. Используется компанией Microsoft. А это уже говорит о том, что модель очень хорошая. 4. Инкрементная модель жизненного цикла.
Загрузка ...
|
