There are a few ways to tackle this:
In a functional aspect you have it, you declare the different choice boxes in the GUI.yaml (avoid the whitespaces in the key names, so instead of "choice green" use "choice_green", and then specify the box in the choice option (using "!box" as separator maybe):
- choice: - "I don't kiss and tell!" choice green: - deuzi says: ... - "You bet we did!" choice red: - deuzi says: ...
The main code to change will be in two places, one in the SimpleGUI.js fil. There's a function called showChoices, that creates each box for the choice, and it already discriminates if the choice is a normal choice or an interrupt. If you change the key name there, then you will have different boxes. But where do you get the information for this?
The other part to modify would be the call to showChoices, to add the choice box, in the LogicManager (showChoices funcion in LogicManager.js). In this function you map the choices text, and you filter some of them in case there's an "!if" and a condition for this choice. You actually need to do something very similar to this. After the filter line, each of your choices will have a "choiceText" property where you can try and find the choice box. To find it you can do something similar to how we find the condition:
For every choice in choices list
split choice.choiceText by ("!box") into result
if length of result is > 1 (you have two parts)
choice.choiceText = result[0] (remove the choice box from the actual text of the choice)
choice.choiceBox = result[1] (add the choice box to the choice
else (default choice box)
choice.choiceBox = "choice"
This is more or less what you should do, let me know how it goes.
Luna