Example of Creating the CheckBox Component

To execute the example, in the HEAD tag of the HTML page add links to the following JS and CSS files:

PP.js
PP.css.

In the SCRIPT tag add a script to create the CheckBox component:

<script type="text/javascript">
    //Create a list to select several possible response options:
    function onLoad() {
        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"
            });
        //Create a button that will check if responses are correct:
        var button = new PP.Ui.Button({ ParentNode: document.getElementById("btn"),
                Content: "Check"
            });
        //Add a handler for the Click event:
        button.Click.add(function(sender, args) {
            //Variables containing value of the CheckedState property:
            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>

In the BODY tag add elements with identifiers:

<body onload="onLoad()">
    Choose right variants:
    <div id = "CB1"></div>
    <div id = "CB2"></div>
    <div id = "CB3"></div>
    <div id = "CB4"></div>
    <div id = "btn"></div>
</body>

After executing the example the HTML page will contain instances of the CheckBox component:

On selecting the first and the last option and clicking the Check button, the message Correct is displayed, otherwise "Sorry! Try again!.