Code for interactive forms

I have no coding experience whatsoever, however im not completely useless and understand how code works and can read it an understand the pattern. What im trying to create is this;
A form that has the next options appear based on whatever the customer chooses in earlier selections. For EXAMPLE

“Select your package” (Drop Down Box options)

  1. Package 1

  2. Package 2

  3. Package 3
    If they choose package 1 these options would appear as tick boxes to select underneath

  4. Pencil 1

  5. Pencil 2

  6. pencil 3
    BUT if they select Package 2 these options would appear as tick boxes

  7. Eraser 1

  8. Eraser 2

  9. Eraser 3
    Essentially the form is developed as selections are made.

Any help is appreciated
Thanks

The first thing you’ll do is to have both of your dropdown menus *onChange event.*

// your event 

let pencils = [    {"label": "pencil1", "value": "pencil1"},                                            {"label": "pencil2", "value": "pencil2"}]

let erasers = [         {"label": "pencil1", "value": "pencil1"},         {"label": "pencil2", "value": "pencil2"}]

if ($w("#dropdown1").value === 'pencils') {$w("#dropdown1").options = pencils}
if ($w("#dropdown1").value === 'erasers') {$w("#dropdown1").options = erasers}

If you dont mind i have gotten here;

This is with the text i need and want.

So what i cant work out are the following;

  1. If the selection is “Order individual tasks” is selected i need TWO radiogroups to appear side by side WITH TITLES. One Title at the top is “Unit 3 Outcome 1” and the other is “Unit 3 Outcome 2”
    The values in each of the radiogroups is exactly the same as in the code i have edited above in “individual tasks”

FINALLY
2. How to hide both the radiogroups until a selection from dropdown1 has been made.

Thanks again