Stimulus and Turbo (Hotwire) in Ruby on Rails - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to connect a Stimulus controller named "hello" to an HTML element.

Ruby on Rails

<div data-controller="[1]">
  Hello, Stimulus!
</div>

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

Ahello

Bturbo

Capplication

Dconnect

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong controller name in the data-controller attribute.

Forgetting to add the data-controller attribute.

The data-controller attribute connects the HTML element to the Stimulus controller named "hello".

2fill in blank

medium

Complete the code to make a Turbo Frame with the ID "messages".

Ruby on Rails

<turbo-frame id="[1]">
  Loading messages...
</turbo-frame>

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

Achat

Bmessages

Cnotifications

Dcomments

Attempts:

3 left

💡 Hint

Common Mistakes

Using an incorrect or mismatched ID for the turbo-frame.

Omitting the ID attribute.

The id attribute of the <turbo-frame> element should be "messages" to identify this frame.

3fill in blank

hard

Fix the error in the Stimulus controller method to log "Hello, Stimulus!" when connected.

Ruby on Rails

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    console.[1]("Hello, Stimulus!")
  }
}

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

Alog

Bprint

Cwrite

Dshow

Attempts:

3 left

💡 Hint

Common Mistakes

Using console.print or other incorrect console methods.

Forgetting parentheses after the method name.

The correct method to output to the browser console is console.log().

4fill in blank

hard

Fill both blanks to create a Stimulus action that calls the "submit" method on form submission.

Ruby on Rails

<form data-controller="form" data-action="[1]->[2]">
  <input type="text" name="name">
  <button type="submit">Send</button>
</form>

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

Asubmit

Bform

Cclick

Dinput

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping event and controller in the data-action attribute.

Using incorrect event names like 'click' for form submission.

The data-action attribute uses the format event->controller#method. Here, submit->form#submit means the submit event triggers the submit method on the form controller.

5fill in blank

hard

Fill all three blanks to create a Turbo Stream template that replaces the element with ID "notification" with new content.

Ruby on Rails

<turbo-stream action="[1]" target="[2]">
  <template>
    <div>[3]</div>
  </template>
</turbo-stream>

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

Aappend

Bnotification

CNew notification received!

Dreplace

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong action like 'append' when intending to replace.

Mismatching the target ID with the actual element ID.

The action attribute should be "replace" to replace the target element. The target is "notification" to specify the element ID. The template contains the new content to show.