Logic is defined in the coding section of the platform, which opens when we click on the "code" button on the left:
The programming language for logic is Google Blockly, which is a block-based language that became very popular through code.org activities. Block-based languages are easier to read and understand and prevent us from making syntax errors. Blockly, in particular, is a full language that has nothing to miss from text-based languages. In Allcancode platform you will use an extended and enhanced version of Blockly, which is suitable for app development.
We will work with the checkboxes, so we need to first of all import the checkbox component by clicking on the import button at the upper right part of the platform.
Then we find "Material Checkbox" in the list under the "Allcancode" tab and click on the "import" button.
Now let's create one variable for each one of the four checkboxes, using the "create variable" button in "Variables" section of Blockly blocks. We can name them "answer1", "answer2", "answer3", and "answer4".
Next, we want to assign to those variables the "instances" of the checkboxes we created earlier in the "preview" section of the platform. Components are like a mold and instances are the result of casting a material in them. In this case, we used the "Material Checkbox" mold to create the four checkboxes under the image of the question.
From the "Variables" section we drag and drop the "set" block four times and change their variable names to those created earlier. Then, from the "Actions" section of blocks and its "components" sub-section drag the "get design instance" block once for each variable.
Finally, drag from the "Text" section of blocks the "empty text" block at the top once for each "get design instance" block.
In each one of the text blocks, we need to type in the respective name of the component in the tree of the "preview" section of the platform.
Checkboxes are independent, which means that the user can check all of them. But this is not correct for this particular app. We want none or one at the most to be checked at any time. One way to implement that logic is this:
The final step is to add a check for the right answer. We just need an additional if block after "unchecking" all other checkboxes. It is highlighted with a yellow border in the following screenshot:
Now we are ready to publish our app!