Home>

I want to create a simple game using HTML and javascript using Bootstrap and display it on Rails.
The HTML page has been successfully loaded and the framework etc. is displayed, but the JS file has not been loaded.

The problem i am having

It was loaded correctly before embedding in Ruby on Rails, but after embedding, plain HTML is displayed.

Corresponding source code
<! doctype html><html><head><meta charset = "utf-8"><title></title><meta name = "description" content = ""><meta name = "viewport" content = "width = device-width, initial-scale = 1"><meta property = "og: title" content = ""><meta property = "og: type" content = ""><meta property = "og: url" content = ""><meta property = "og: image" content = ""><link rel = "manifest" href = "site.webmanifest"><link rel = "apple-touch-icon" href = "icon.png"><!-Place favicon.ico in the root directory-><link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity = "sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc + NcPb1"
<meta name = "theme-color" content = "# fafafa"></head><body>                            A simple primary alert—check it out!
                                    <button type = "button">Primary</button>                      <button type = "button">Primary</button>                      <button type = "button">Primary</button>                  <script src = "index.js"></script></body></html>
// Define the problem statement
const quiz = [
  {
    question:'Which is the payment method for coupon tickets? ',
    answers: ['Difference settlement',' Censored settlement','Section change'],


    correct:'Discontinuation settlement'
  },

 {
    question:'Which is the correct payment method that you asked for over-the-counter payment when using a commuter pass? ',
    answers: ['Difference settlement','Censored settlement','Section change'],


    correct:'Discontinuation settlement'
  },{
    question:'I asked for payment with a ticket valid for 2 days. Which is the payment method when the departure station is correct? ',
    answers: ['Difference settlement','Censored settlement','Section change'],


    correct:'Settlement difference'
  },

 {
    question:'Which is the correct payment method for issuing a ticket for Omiya Mikishita Tokyo with a ticket valid for 3 days? ',
    answers: ['Difference settlement','Censored settlement','Section change'],


    correct:'Change section'
  },

 {
    question:'Change the ticket section for Omiya Mikishita Tokyo, which is the correct branch station? ',
    answers: ['Omiya','Musashi-Urawa','Tokyo'],


    correct:'Musashi-Urawa'
  },

 {
    question:'Which is the correct way to settle an Ed ticket valid for one day? ',
    answers: ['Difference settlement','Censored settlement','Section change'],


    correct:'Settlement difference'
  },

 {
    question:'So which is the correct way to settle a large ticket that is valid for one day? ',
    answers: ['Difference settlement','Censored settlement','Section change'],


    correct:'Settlement difference'
  },

 {
    question:'Which is the correct payment method for a special ticket for Omiya Mikishita Tokyo that is valid for 3 days? ',
    answers: ['Difference settlement','Censored settlement','Section change'],


    correct:'Discontinuation settlement'
  },

 {
    question:'Which is the correct discount rate when a one-way business kilometer exceeds 100 kilometers when a person with a disability of type 1 or type 2 gets off alone? ',
    answers: ['50%', '75%', '100%'],


    correct: '50%'
  },

 {
    question:'Which is the correct payment support that the person who boarded with an IC card from Fukushima asked for payment? ',
    answers: ['Pull from the IC without asking questions','Listen to the route and pull the amount',' Touch to get out and encourage touch'],


    correct:'Listen to the route and subtract the amount'
  }];;
// Define long code as short word
const $window = window;
const $doc = document;
const $question = $doc.getElementById ('js-question');
const $buttons = $doc.querySelectorAll ('.btn');
const quizLength = quiz.length;
let quizCount = 0;
let score = 0;
// Switch display depending on the problem
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 ++;
  }
};
// Branch to go to the next question or finish it depending on the number of answers
const goToNext = () =>{
  quizCount ++;
  if (quizCount<quizLength) {
    init (quizCount);
  } else {
    showEnd ();
  }
};
// Correct/wrong judgment, if the answer is correct, add 1 score, and even if the answer is incorrect, go to the next question
const judge = (elm) =>{
  if (elm.textContent === quiz [quizCount] .correct) {
    $window.alert ('correct answer!');
    score ++;
  } else {
    $window.alert ('incorrect!');
  }
  goToNext ();
};
// Show the score at the end and hide the button
const showEnd = () =>{
  $question.textContent ='End! Your score is'+ score +'/' + quizLength +';
  const $items = $doc.getElementById ('js-items');
  $items.style.visibility ='hidden';
};
init ();
// Switch options depending on the problem
let answersIndex = 0;
let answersLen = quiz [quizCount] .answers.length;
while (answersIndex  {
    judge (e.target);
  });
  answersIndex ++;
}
What I tried

Enter<% = javascript_include_tag'application'%>in the "head" position of "/app/views/layouts/application.html.erb"
I tried to write<% = javascript_include_tag'index'%>in the HTML
I got an error and the display did not change.

Supplementary information (FW/tool version, etc.)

Ruby on Rails 6
JavaScript
Bootstrap writes code on HP

  • Answer # 1

    It doesn't seem to work as expected due to Turbolinks.

    Added to the end of # app/javascript/packs/application.js
    document.addEventListener ("turbolinks: load", function () {
    #Write JavaScript here
    })


    I haven't set up Bootstrap, but for referenceapplication.html.erbIs as follows.

    <! DOCTYPE html>
    <html>
    <head>
      <title>Untitled1</title>
      <% = csrf_meta_tags%>
      <% = csp_meta_tag%>
      <% = stylesheet_link_tag'application', media:'all','data-turbolinks-track':'reload'%>
      <% = javascript_pack_tag'application','data-turbolinks-track':'reload'%>
    </head>
    <body>
      <% = yield%>
    </body>
    </html>