Import maps (Rails 7+) - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Stimulus library using import maps in Rails 7+.

Ruby on Rails

import { Application } from "@hotwired/[1]"

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

Awebpack

Bstimulus

Crails

Dturbo

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'turbo' instead of 'stimulus'.

Trying to import from 'rails' or 'webpack' which are incorrect here.

The Stimulus library is imported from "@hotwired/stimulus" using import maps in Rails 7+.

2fill in blank

medium

Complete the code to start the Stimulus application after importing it.

Ruby on Rails

const application = [1]()

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

Astart

Bnew Application

CApplication.start

DApplication

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'start()' which is not a function here.

Trying 'new Application' which is not the correct syntax.

You create a new Stimulus application by calling the imported 'Application' as a function.

3fill in blank

hard

Fix the error in the import map tag in Rails HTML to include the correct attribute.

Ruby on Rails

<%= javascript_importmap_tags [1] %>

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

Adefer: true

Basync: true

Ctype: 'module'

Dsrc: 'application.js'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'async: true' which is not supported here.

Adding 'type: module' manually which is handled automatically.

The 'javascript_importmap_tags' helper accepts the option 'defer: true' to defer script loading properly.

4fill in blank

hard

Fill both blanks to register a Stimulus controller named 'hello_controller' in the application.

Ruby on Rails

import HelloController from "./controllers/[1]"
application.[2]("hello", HelloController)

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

Aregister

Bhello_controller

Chello

Dcontrollers

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'controllers' instead of the controller file name.

Calling 'application.hello' instead of 'application.register'.

You import the controller file 'hello_controller' and register it with the application using 'register'.

5fill in blank

hard

Fill the blank to define an import map pin for 'chart.js' with preload in config/importmap.rb.

Ruby on Rails

pin "chart.js", to: "chart.umd.js", preload: [1]

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

A:vendor

B:cdn

Ctrue

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Setting preload to false disables preloading.

Using wrong symbols for 'under' or 'from' options.

To pin 'chart.js' with preload, set preload: true in importmap config.