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.

Practice

1. What is the main purpose of Stimulus in a Rails application using Hotwire?

easy

A. To add simple JavaScript behavior to HTML elements using controllers and data attributes

B. To replace the entire page content on every user action

C. To handle database queries efficiently

D. To style HTML elements with CSS

Solution

1. Step 1: Understand Stimulus role

   Stimulus is designed to add JavaScript behavior to HTML by connecting controllers to elements via data attributes.

2. Step 2: Compare other options

   Replacing entire page content is Turbo's job, not Stimulus. Database queries and styling are unrelated.

3. Final Answer:

   To add simple JavaScript behavior to HTML elements using controllers and data attributes -> Option A

4. Quick Check:

   Stimulus = JavaScript behavior via controllers [OK]

Hint: Stimulus controls behavior, Turbo controls page updates [OK]

Common Mistakes:

• Confusing Turbo's page update role with Stimulus
• Thinking Stimulus handles styling or database
• Assuming Stimulus reloads full pages

2. Which of the following is the correct way to connect a Stimulus controller named hello to a button element?

easy

A. Click me

B. Click me

C. Click me

D. Click me

Solution

1. Step 1: Recall Stimulus controller connection syntax

   Stimulus controllers are connected using the data-controller attribute with the controller name.

2. Step 2: Verify other attributes

   data-action defines event handlers, data-target defines targets inside controllers, data-connect is invalid.

3. Final Answer:

   <button data-controller="hello">Click me</button> -> Option B

4. Quick Check:

   Controller connection uses data-controller [OK]

Hint: Use data-controller to link Stimulus controllers [OK]

Common Mistakes:

• Using data-action instead of data-controller to connect controller
• Confusing data-target with controller connection
• Using non-existent data-connect attribute

3. Given this Stimulus controller code:

export default class extends Controller {
  static targets = ["output"]
  greet() {
    this.outputTarget.textContent = "Hello, Stimulus!"
  }
}

and this HTML:

<div data-controller="greeting">
  <button data-action="click->greeting#greet">Say Hello</button>
  <span data-greeting-target="output"></span>
</div>

What happens when the button is clicked?

medium

A. The span text changes to 'Hello, Stimulus!'

B. Nothing happens because the controller name is wrong

C. The page reloads

D. An error is thrown because outputTarget is undefined

Solution

1. Step 1: Match controller and targets

   The controller is named 'greeting' and defines an output target. The HTML uses data-controller="greeting" and data-greeting-target="output" correctly.

2. Step 2: Understand the greet method and action

   The button triggers greet on click, which sets the outputTarget's textContent to 'Hello, Stimulus!'.

3. Final Answer:

   The span text changes to 'Hello, Stimulus!' -> Option A

4. Quick Check:

   Correct controller and target update text [OK]

Hint: Check controller name matches data-controller and targets [OK]

Common Mistakes:

• Mismatching controller name and data-controller attribute
• Forgetting to define static targets array
• Expecting page reload instead of DOM update

4. Identify the error in this Turbo Frame usage:

<turbo-frame id="messages">
  <%= render @messages %>
</turbo-frame>

When a new message is created, the frame does not update automatically. What is the likely cause?

medium

A. The frame id should be messages_frame instead of messages

B. Turbo Frames cannot render collections

C. The render call is missing a partial

D. The server response does not include a turbo-frame with matching id

Solution

1. Step 1: Understand Turbo Frame update mechanism

   Turbo Frames update only if the server response includes a turbo-frame element with the same id as the frame on the page.

2. Step 2: Identify the problem

   If the server response lacks a matching turbo-frame wrapper, Turbo cannot replace the frame content automatically.

3. Final Answer:

   The server response does not include a <turbo-frame> with matching id -> Option D

4. Quick Check:

   Matching turbo-frame id in response is required [OK]

Hint: Ensure server response wraps content in matching turbo-frame id [OK]

Common Mistakes:

• Changing frame id arbitrarily
• Assuming Turbo Frames can't render collections
• Forgetting to wrap response in turbo-frame tag

5. You want to create a live search feature using Turbo and Stimulus. Which approach correctly combines both to update search results as the user types without full page reload?

hard

A. Use Stimulus to reload the whole page manually on input change

B. Use Turbo Frames alone to reload the entire page on every keystroke

C. Use a Stimulus controller to listen for input events, send fetch requests to the server, and update a Turbo Frame with the results

D. Use Turbo Streams to replace the entire page content on input

Solution

1. Step 1: Understand live search requirements

   Live search updates results dynamically as the user types without full reload.

2. Step 2: Combine Stimulus and Turbo correctly

   Stimulus listens to input events and sends fetch requests. Turbo Frame updates only the results part of the page.

3. Step 3: Evaluate other options

   Reloading entire page on every keystroke is inefficient. Turbo Streams replace parts but need server push. Stimulus alone can't reload page efficiently.

4. Final Answer:

   Use a Stimulus controller to listen for input events, send fetch requests to the server, and update a Turbo Frame with the results -> Option C

5. Quick Check:

   Stimulus + Turbo Frame = dynamic partial updates [OK]

Hint: Stimulus handles events, Turbo Frame updates partial content [OK]

Common Mistakes:

• Reloading full page on every input
• Using Turbo Frames without Stimulus for input events
• Misusing Turbo Streams for full page replacement