railsにクイズ機能を実装する

//  /javascript/title.jsの記述

 // 選択肢を取得する
const selects = document.getElementsByClassName("card-footer-item")

// ユーザーからの回答を格納するための配列を用意
let user_ans = ["1","2","3","4","5","6","7"];

//railsから問題の答えを取得する
data_quiz = JSON.parse(document.getElementById('tag_info').dataset.json);

// クリックした時にボタンの色を青色に変更する処理
for(let i=0; i<selects.length; i++){
  // クリック情報を取得する
  console.log(selects[i])
  selects[i].addEventListener("click",function(){    
    if(i%2==0){
      // 左側のボタンの時
      //選択肢を初期化（いったん色を外す）
      selects[i].className = 'button card-footer-item'
      selects[i+1].className = 'button card-footer-item'
      // 色を変更する
      user_ans[Math.floor(i / 2) ] = selects[i].innerText
      selects[i].className = 'button card-footer-item is-primary'
    }else{
      // 右側のボタンの時
      // 選択肢を初期化（いったん色を外す）
      selects[i].className = 'button card-footer-item'
      selects[i-1].className = 'button card-footer-item'
      // 色を変更する
      user_ans[ Math.floor(i / 2)] = selects[i].innerText
      selects[i].className = 'button card-footer-item is-primary'
      console.log(user_ans);
    }
	})
}

//採点を行うボタンの要素を取得する
const check_ans = document.querySelector("#check");
//正解のマークを表示する場所の要素を取得
const ans_tile = document.querySelectorAll("#ans");

check_ans.addEventListener("click", function(){
// それぞれの項目の回答と正解を比較する
for(let i=0; i<data_quiz.length; i++){
  if(data_quiz[i].ans == user_ans[i]){
    // 正解のとき
    // 要素に値を入れて、正解と書かれたボタンを表示する
    ans_tile[i].innerText = "正解"
    ans_tile[i].className = "button is-success"
  }else{
    // 不正解のとき
    // 要素に値を入れて、正解と書かれたボタンを表示する
    ans_tile[i].innerText = "不正解"
    ans_tile[i].className = "button is-warning"
  }
}
})

//  /views/titles/show.html.erbの記述

<section class="section mt-6">
  <div class="container">
    <div class="columns is-centered">
      <div class="column is-5">
        <div class="card mb-6">
        <p class="card-header-title">
              <%= @title.name %>
        </p>
        </div>

        <% @title.quizs.each do |quiz| %>
        // コントローラーから受け取ったデータの埋め込む
        <div id="tag_info" data-json="<%= @title.quizs.to_json %>" ></div>
        // 採点後に表示するための空の要素
        <div class="", id="ans"></div>
        <div class="card mb-6">
          <header class="card-header">
            <div class="card-header-title">
            <%= quiz.content%>
            </div>
          </header>
          
          <footer class="card-footer">
              <div class="button card-footer-item">
                <%= @title.title %>
              </div>
              <div class="button card-footer-item" >
                <%= @title.title_other %>
              </div>
          </footer>
        </div>
        <% end %>
      <div class= "button is-info", id ="check">採点する</div>
      </div>

    </div>
  </div>
</section>

<%= javascript_include_tag 'titles.js' %>

・document.getElementsByClassName("任意のクラス名")  
・document.querySelector("#check")  

指定した要素.addEventListener("任意のイベント", function(){
行いたい処理
}