getContext in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to get a context value inside a Svelte component.

Svelte

import { getContext } from 'svelte';

const value = getContext([1]);

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

A'myKey'

BsetContext

Ccontext

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a function or variable instead of a string key.

Using setContext instead of getContext.

In Svelte, getContext takes a key string to retrieve the context value.

2fill in blank

medium

Complete the code to import the correct function to retrieve context in Svelte.

Svelte

import { [1] } from 'svelte';

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

AsetContext

BcreateContext

CuseContext

DgetContext

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing getContext with setContext.

Using React-like functions such as useContext.

The getContext function is imported from 'svelte' to access context values.

3fill in blank

hard

Fix the error in this code that tries to get context but uses the wrong key.

Svelte

const theme = getContext([1]);

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

A'Theme'

Btheme

C'theme'

DgetContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable instead of a string key.

Wrong capitalization of the key string.

The key must be a string matching exactly the one used in setContext, including case.

4fill in blank

hard

Fill both blanks to get a context value and log it in a Svelte component.

Svelte

import { [1] } from 'svelte';

const data = [2]('userData');
console.log(data);

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

AgetContext

BsetContext

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using setContext instead of getContext.

Not importing getContext before using it.

You import getContext and call it with the key string to retrieve context.

5fill in blank

hard

Fill all three blanks to get a context value and use it in a reactive statement.

Svelte

import { [1] } from 'svelte';

const count = [2]('countKey');

$: doubled = count [3] 2;

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

AgetContext

C*

D+

Attempts:

3 left

💡 Hint

Common Mistakes

Using + instead of * for multiplication.

Not importing getContext before use.

Import and call getContext to get the value, then multiply it by 2 reactively.