Для выполнения примера подключите библиотеку PP.js и таблицы визуальных стилей PP.css. Создадим список для выбора нескольких возможных вариантов ответа. Выбор ответа осуществляется за счет выделения компонента CheckBox:
<body>
Choose right variants:
<div id = "CB1"></div>
<div id = "CB2"></div>
<div id = "CB3"></div>
<div id = "CB4"></div>
<div id = "btn"></div>
<script type="text/javascript">
//Создаем экземпляры компонента CheckBox:
var checkbox1 = new PP.Ui.CheckBox({
ParentNode: document.getElementById("CB1"),
Content: "10"
});
var checkbox2 = new PP.Ui.CheckBox({
ParentNode: document.getElementById("CB2"),
Content: "12"
});
var checkbox3 = new PP.Ui.CheckBox({
ParentNode: document.getElementById("CB3"),
Content: "14"
});
var checkbox4 = new PP.Ui.CheckBox({
ParentNode: document.getElementById("CB4"),
Content: "16"
});
//Создаем кнопку, которая будет проверять правильность ответов:
var button = new PP.Ui.Button({ ParentNode: document.getElementById("btn"),
Content: "Check"
});
//Добавляем обработчик события Click:
button.Click.add(function(sender, args) {
//Переменные, содержащие значение свойства CheckedState:
var cb1 = checkbox1.getCheckedState();
var cb2 = checkbox2.getCheckedState();
var cb3 = checkbox3.getCheckedState();
var cb4 = checkbox4.getCheckedState();
if (cb1 === true && cb4 === true && cb2 === false && cb3 === false)
alert("Correct!");
else
alert("Sorry! Try again!");
});
</script>
</body>
После выполнения примера на html-странице будут размещены экземпляры компонента CheckBox:
Если отметить первый и последний варианты ответа и нажать на кнопку с надписью «Check», на экран будет выведено сообщение «Correct». При другой отметке будет выдаваться сообщение «Sorry! Try again!».
См. также: