How do I randomize the order of clickable components and set the click to run another program?

Question

Let's say I have the following, which will successfully randomize the order of clickable components. However, clicking the component does not run the next program, it just gets stuck in a loop.

*randomize: 2
	*component 
		*group
			*component
				*classes: bg-info
				*image: https://i.stack.imgur.com/WFy1e.jpg
					*caption: cats
				*click
					>> preferred_image = "Cat"
					*program:  second_program
					
		*group
			*component
				*classes: bg-info
				*image: https://i.stack.imgur.com/WFy1e.jpg
					*caption: Family or dog?
				*click
					>> preferred_image = "Dog"
					*program: second_program

What's the right way of doing this?

Also, if I put any content BELOW this structure, that content will be displayed. I'd like everything under randomize to be a self-contained page, but I'm not sure how to do that.

Answer 1

You need to have the content to randomize indented right under the *randomize keyword, so all you have to do to get your code to work is to change the first two lines:

*component
	*randomize: 2
		*group
			*component
				*classes: bg-info
				*image: https://i.stack.imgur.com/WFy1e.jpg
					*caption: cats
				*click
					>> preferred_image = "Cat"
					*program:  second_program
				
		*group
			*component
				*classes: bg-info
				*image: https://i.stack.imgur.com/WFy1e.jpg
					*caption: Family or dog?
				*click
					>> preferred_image = "Dog"
					*program: second_program

*wait

The code that you add below the components gets displayed because a component, even if it is clickable, does not act like a page break. In order to create the page break, note that I added a *wait forever.

If you want to have some code after the components that gets executed after second_program is run, you can use a *goto and *label:

		*group
			*component
				*classes: bg-info
				*image: https://i.stack.imgur.com/WFy1e.jpg
					*caption: Family or dog?
				*click
					>> preferred_image = "Dog"
					*program: second_program
					*goto: after_second_program

*wait

*label: after_second_program

Comments

I'm not even sure the outside *component is necessary. I think you could just start with *randomize. Am I missing something?