Group bindings in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind the checkbox group to the variable.

Svelte

<input type="checkbox" bind:group=[1] value="apple"> Apple

Drag options to blanks, or click blank then click option'

AfruitGroup

BfruitList

CcheckedItems

DselectedFruits

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable that is not an array.

Forgetting to use bind:group syntax.

The variable 'selectedFruits' is used to bind the checkbox group, so changes update this array.

2fill in blank

medium

Complete the code to bind the radio buttons group to the variable.

Svelte

<input type="radio" bind:group=[1] value="red"> Red

Drag options to blanks, or click blank then click option'

AselectedColor

Bcolors

CcolorList

DcolorGroup

Attempts:

3 left

💡 Hint

Common Mistakes

Binding radio group to an array instead of a single value.

Using a variable name that implies multiple values.

The variable 'selectedColor' holds the selected radio button value.

3fill in blank

hard

Fix the error in the checkbox group binding.

Svelte

<input type="checkbox" bind:group=[1] value="banana"> Banana

Drag options to blanks, or click blank then click option'

AselectedFruits

BselectedFruit

Cfruit

Dfruits

Attempts:

3 left

💡 Hint

Common Mistakes

Using a singular variable name for a checkbox group.

Binding to a variable that is not initialized as an array.

The variable must be an array to hold multiple selected values; 'selectedFruits' is correct.

4fill in blank

hard

Fill both blanks to bind a checkbox group and display the selected items.

Svelte

<script>
  let [1] = [];
</script>

<input type="checkbox" bind:group=[1] value="orange"> Orange
<p>Selected: [2]</p>

Drag options to blanks, or click blank then click option'

AselectedItems

CselectedFruits

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names in script and template.

Not initializing the variable as an array.

The same variable 'selectedItems' is used for binding and displaying selected values.

5fill in blank

hard

Fill all three blanks to bind a radio group and show the selected value with a label.

Svelte

<script>
  let [1] = "";
</script>

<label>
  <input type="radio" bind:group=[1] value="small"> Small
</label>
<p>Selected size: [2]</p>
<p>Label: [3]</p>

Drag options to blanks, or click blank then click option'

AselectedSize

C"Size: " + selectedSize

D"You chose: " + selectedSize

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names in different places.

Not concatenating the string properly in the label.

The variable 'selectedSize' is used for binding and displaying. The label concatenates a string with the selected value.