Stimulus and Turbo (Hotwire) in Ruby on Rails - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Stimulus Controller: What happens on button click?

Given this Stimulus controller, what will be the console output when the button is clicked?

export default class extends Controller {
  static targets = ["output"]

  connect() {
    this.outputTarget.textContent = "Connected";
  }

  greet() {
    console.log("Hello from Stimulus!");
    this.outputTarget.textContent = "Greeted";
  }
}

And the HTML:

<div data-controller="hello">
  <button data-action="click->hello#greet">Click me</button>
  <span data-hello-target="output"></span>
</div>

A Console logs nothing and the span text remains empty

B Console logs "Connected" and the span text changes to "Hello from Stimulus!"

C Console logs "Greeted" and the span text changes to "Connected"

D Console logs "Hello from Stimulus!" and the span text changes to "Greeted"

💡 Hint

Remember the connect() method runs when the controller loads, and the greet() method runs on button click.

The connect() method sets the span text to "Connected" initially. When the button is clicked, the greet() method logs "Hello from Stimulus!" and updates the span text to "Greeted".

📝 Syntax

intermediate

Turbo Frame: Correct attribute to load content asynchronously?

Which attribute should you add to a <turbo-frame> tag to load its content asynchronously when the frame is first shown?

A loading="lazy"

B data-turbo-action="lazy-load"

C async="true"

D src="url"

💡 Hint

Think about how browsers handle lazy loading for images and frames.

The loading="lazy" attribute tells Turbo Frames to load content only when needed, improving performance.

❓ state_output

advanced

Stimulus: What is the value of count after 3 clicks?

Consider this Stimulus controller:

export default class extends Controller {
  static values = { count: Number }

  connect() {
    this.countValue = 0;
  }

  increment() {
    this.countValue++;
    console.log(this.countValue);
  }
}

And the HTML:

<div data-controller="counter">
  <button data-action="click->counter#increment">Add</button>
</div>

What will be logged after clicking the button 3 times?

A 0, 1, 2

B 1, 2, 3

C 3, 3, 3

D undefined, undefined, undefined

💡 Hint

Check how countValue is initialized and updated.

The countValue starts at 0 on connect, then increments by 1 each click, so logs 1, then 2, then 3.

🔧 Debug

advanced

Turbo Stream: Why does the update not appear on the page?

You have a Turbo Stream response to update a <div id="message"> but the page does not update. What is the most likely cause?

Turbo Stream response:

<turbo-stream action="update" target="message">
  <template>New message content</template>
</turbo-stream>

HTML snippet:

<div id="msg">Old message</div>

A The target id in the Turbo Stream does not match the HTML element's id

B The Turbo Stream action "update" is invalid

C The template tag is missing a closing tag

D Turbo Streams require the target to be a class, not an id

💡 Hint

Check the target attribute and the HTML element's id carefully.

The Turbo Stream targets an element with id "message" but the HTML has id "msg". They must match exactly for the update to work.

🧠 Conceptual

expert

How does Turbo Drive improve user experience in Rails apps?

Which statement best explains how Turbo Drive enhances navigation in Rails applications?

A It disables JavaScript to improve page load speed and reduce errors

B It caches all pages on the client to allow offline access without server requests

C It replaces full page reloads with partial page updates by intercepting link clicks and form submissions

D It automatically converts all Rails views into React components for faster rendering

💡 Hint

Think about how Turbo Drive handles navigation events.

Turbo Drive intercepts link clicks and form submissions to load pages via AJAX, replacing full reloads with faster partial updates, improving speed and smoothness.