JavaScriptがHTMLファイルに反映されない

前提・実現したいこと

HTMLのファイルにJavaScriptを反映させたい

同じような問題を抱えている人は多いようですが、異なる解決策の情報が多すぎて、どれを参考にしていいのか分からない状況です...

発生している問題・エラーメッセージ

GET http://localhost:3000/javascript/question.js net::ERR_ABORTED 404 (Not Found)　questions:52

該当のソースコード

JavaScript
【question.js】

const quiz = [
  {
    question: 'What do you like to do？',
    answers: [ 'I play soccer.', 'I really like to play tennis', 'I love it', 'Thanks'],
    correct: 'I really like to play tennis'
  }, {
    question: 'What did you eat for breakfast this morning？',
    answers: [ 'I love to eat', 'I am eating a banana', 'I ate an apple', 'I was eat sushi'],
    correct: 'I ate an apple'
  }, {
    question: 'Are you happy to come here？',
    answers: [ 'Why not ??', 'No, I am', 'I am here', 'You are happy'],
    correct: 'Why not ??'
  }, {
    question: 'What are you doing now？',
    answers: [ 'I was eating dinner', 'I eating an apple', 'I love to eat chocolate', 'I am having a toast for lunch'],
    correct: 'I am having a toast for lunch'
  }
];

const $window = window;
const $doc = document;
const $question = $doc.getElementById('js-question');
const $buttons = $doc.querySelectorAll('.btn');

const quizLen = quiz.length;
let quizCount = 0;
let score = 0;

const init = () => {
  $question.textContent = quiz[quizCount].question;
  
  const buttonLen = $buttons.length;
  let btnIndex = 0;
  
  while(btnIndex < buttonLen){
    $buttons[btnIndex].textContent = quiz[quizCount].answers[btnIndex];
    btnIndex++;
  }
};

const goToNext = () => {
  quizCount++;
  if(quizCount < quizLen){
    init(quizCount);
  } else {
    // $window.alert('クイズ終了！');
    showEnd();
  }
};

const judge = (elm) => {
  if(elm.textContent === quiz[quizCount].correct){
    $window.alert('正解!');
    score++;
  } else {
    $window.alert('不正解!');
  }
  goToNext();
};

const showEnd = () => {
  $question.textContent = '終了！あなたのスコアは' + score + '/' + quizLen + 'です';
  
  const $items = $doc.getElementById('js-items');
  $items.style.visibility = 'hidden';
};

init();

let answersIndex = 0;
let answersLen = quiz[quizCount].answers.length;

while(answersIndex < answersLen){
  $buttons[answersIndex].addEventListener('click', (e) => {
    judge(e.target);
  });
  answersIndex++;
}

HTML
【JavaScriptを反映させたいHTMLファイル】

  <div class="container">
    
    <div class="jumbotron mt-5">
      <div class="d-flex justify-content-center">
        <div id="js-question" class="alert alert-primary" role="alert">
          A simple primary alert—check it out!
        </div>
      </div>
      
      <div id="js-items" class="d-flex justify-content-center">
        <div class="m-2">
          <button type="button" id="js-btn-1" class="btn btn-primary">Primary</button>
        </div>
        <div class="m-2">
          <button type="button" id="js-btn-2" class="btn btn-primary">Primary</button>
        </div>
        <div class="m-2">
          <button type="button" id="js-btn-3" class="btn btn-primary">Primary</button>
        </div>
        <div class="m-2">
          <button type="button" id="js-btn-4" class="btn btn-primary">Primary</button>
        </div>
      </div>
    </div>
  </div>
  
  <script src="../javascript/question.js"></script>

JavaScript
【application.js】

require("@rails/ujs").start()
// require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("../good_answer")
//= require jquery
//= require_tree .

HTML
【application.html.erb】

<!DOCTYPE html>
<html>
  <head>
    <title>RECTURE</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/4fa5451ade.js" crossorigin="anonymous"></script>
  </head>
    <%= yield %>
  </body>
</html>

【ディレクトリとファイルの構造】
イメージ説明

11/18(水) 18:39 更新

JavaScript
【現在のエラー文】
questions:1 GET http://localhost:3000/questions 500 (Internal Server Error)

JavaScript
【index.html.erb】←JSを反映させたいファイル

  <div class="container">
    
    <div class="jumbotron mt-5">
      <div class="d-flex justify-content-center">
        <div id="js-question" class="alert alert-primary" role="alert">
          A simple primary alert—check it out!
        </div>
      </div>
      
      <div id="js-items" class="d-flex justify-content-center">
        <div class="m-2">
          <button type="button" id="js-btn-1" class="btn btn-primary">Primary</button>
        </div>
        <div class="m-2">
          <button type="button" id="js-btn-2" class="btn btn-primary">Primary</button>
        </div>
        <div class="m-2">
          <button type="button" id="js-btn-3" class="btn btn-primary">Primary</button>
        </div>
        <div class="m-2">
          <button type="button" id="js-btn-4" class="btn btn-primary">Primary</button>
        </div>
      </div>
    </div>
  </div>
  
  <%= javascript_pack_tag 'question'%>