rails6でjavascriptは動くのでしょうか

前提・実現したいこと

ドットインストールでjavascriptを勉強しています。
rails6で導入することを目的としているのですが、rails6にjavascriptを入れても読み込んでくれません。
コンソールでエラーを確認しましたがエラーは発生しておらず原因がわかりません。

rails6のバグでしょうか？教えていただけるとありがたいです。
又参考にしているコードはドットインストールjavascriptで三択クイズを作ろうです。（https://dotinstall.com/lessons/quiz_js_v3/51407)

該当のソースコード

html
1#application.html.erb
2<!DOCTYPE html>
3<html>
4  <head>
5    <title>Js</title>
6    <%= csrf_meta_tags %>
7    <%= csp_meta_tag %>
8
9    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
10    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
11  </head>
12
13  <body>
14    <%= yield %>
15  </body>
16</html>
17

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>Quiz</title>
6</head>
7
8<body>
9  <section class="container">
10    <p id="question"></p>
11    <ul id="choices"></ul>
12    <div id="btn" class="disabled">Next</div>
13  </section>
14</body>
15</html>
16

css
1body {
2  background: #efdec1;
3  font-size: 14px;
4  font-family: Verdana, sans-serif;
5}
6
7.container {
8  width: 400px;
9  margin: 8px auto;
10  background: #fff;
11  border-radius: 4px;
12  padding: 16px;
13}
14
15#question {
16  margin-bottom: 16px;
17  font-weight: bold;
18}
19
20#choices {
21  list-style: none;
22  padding: 0;
23  margin-bottom: 16px;
24}
25
26#choices>li {
27  border: 1px solid #ccc;
28  border-radius: 4px;
29  padding: 10px;
30  margin-bottom: 10px;
31  cursor: pointer;
32}
33
34#choices>li:hover {
35  background: #f8f8f8;
36}
37
38#btn {
39  background: #3498db;
40  padding: 8px;
41  border-radius: 4px;
42  cursor: pointer;
43  text-align: center;
44  color: #fff;
45  box-shadow: 0 4px 0 #2880b9;
46}
47
48#btn.disabled {
49  background: #ccc;
50  box-shadow: 0 4px 0 #bbb;
51  opacity: 0.7;
52}
53

javascript
1'use strict';
2
3{
4  const question = document.getElementById('question');
5  const choices = document.getElementById('choices');
6  const btn = document.getElementById('btn');
7
8  const quizSet = [{
9      q: 'What is A?',
10      c: ['A0', 'A1', 'A2']
11    },
12    {
13      q: 'What is B?',
14      c: ['B0', 'B1', 'B2']
15    },
16    {
17      q: 'What is C?',
18      c: ['C0', 'C1', 'C2']
19    },
20  ];
21  let currentNum = 0;
22
23  question.textContent = quizSet[currentNum].q;
24
25  quizSet[currentNum].c.forEach(choice => {
26    const li = document.createElement('li');
27    li.textContent = choice;
28    choices.appendChild(li);
29  });
30}
31

maisumakun

2020/05/25 02:28

JavaScriptのファイル名は何でしょうか？

tetsuya7724

2020/05/25 02:31

index.jsです。場所はassets/javascript/packs/home/index.jsになります。

maisumakun

2020/05/25 02:32

assets/javascript/packs/application.jsの中身はどのようになっていますか？

tetsuya7724

2020/05/25 02:33

// This file is automatically compiled by Webpack, along with any other files // present in this directory. You're encouraged to place your actual application logic in // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") // Uncomment to copy all static images under ../images to the output folder and reference // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) // or the `imagePath` JavaScript helper below. // // const images = require.context('../images', true) // const imagePath = (name) => images(name, true) この様になっています。