JavaScript for interactivity in Intro to Computing - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to show an alert when the button is clicked.

Intro to Computing

document.getElementById('myButton').addEventListener('click', function() { alert([1]); });

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

A'Hello!'

BHello!

Calert('Hello!')

Dconsole.log('Hello!')

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the message string.

Using console.log instead of alert.

Passing a function call instead of a string.

The alert function requires a string argument inside quotes to display the message.

2fill in blank

medium

Complete the code to change the text of a paragraph with id 'text' when the button is clicked.

Intro to Computing

document.getElementById('myButton').addEventListener('click', function() { document.getElementById('text').[1] = 'Text changed!'; });

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

AinnerHTML

BtextContent

CinnerText

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'value' which works for input elements, not paragraphs.

Using innerHTML which can cause security issues if not careful.

Using innerText which behaves differently across browsers.

textContent changes the visible text inside an element safely without HTML parsing.

3fill in blank

hard

Fix the error in the code to toggle a CSS class 'active' on a div with id 'box' when clicked.

Intro to Computing

document.getElementById('box').addEventListener('click', function() { this.classList.[1]('active'); });

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

Aremove

Badd

Ctoggle

Dcontains

Attempts:

3 left

💡 Hint

Common Mistakes

Using add or remove which only add or remove but do not toggle.

Using contains which only checks if the class exists.

The toggle method adds the class if missing, or removes it if present, perfect for toggling.

4fill in blank

hard

Fill both blanks to create a function that changes the background color of the body to blue when called.

Intro to Computing

function changeBackground() { document.body.style.[1] = [2]; }

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

AbackgroundColor

Bbackground-color

C'blue'

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'background-color' which is invalid in JS style property.

Not putting the color name in quotes.

Using the color name without quotes.

In JavaScript, CSS properties use camelCase like backgroundColor, and color values must be strings in quotes.

5fill in blank

hard

Fill all three blanks to create an event listener that changes the text of a button to 'Clicked!' when it is clicked.

Intro to Computing

document.getElementById([1]).addEventListener([2], function() { this.[3] = 'Clicked!'; });

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

A'myButton'

B'click'

CtextContent

Donclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using onclick instead of 'click' event name.

Not quoting the id or event name strings.

Using innerHTML instead of textContent.

The element id is 'myButton' (string), the event is 'click' (string), and textContent changes the button's visible text.