JavaScriptでクイズのようなアプリを動かしたい

前提・実現したいこと

環境：Ruby on Rails, JavaScript

JavaScriptにて見本のようなクイズアプリを作りたいです。
見本→https://codepen.io/programjp/pen/GRveReO?editors=1011

少し改編し、問題として画像を見せ選択肢の中から答えを選んでもらうようにしています。
見本アプリでは回答ごとに次の問題が表示されますが、現在私のコードでは1問目もしくは２問目が表示され、回答を押してもエラーが出て進みません。

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

コンソールでは

Uncaught ReferenceError: answerCheck is not defined
    at HTMLButtonElement.onclick (easy1:33:67)
onclick @ easy1:33

とanswerCheckが無いと言われます

該当のソースコード

easy1.html.erb
<div class="question">
    <h2>当てはまるものを一つ選びましょう</h2>
    <div class="image-question">
      <img src="/assets/hyoujityu.png" id="_question"><h2>はどれ？</h2>
    </div>
    <ul>
      <li id="_ans1">回答1</li>
      <li id="_ans2">回答2</li>
      <li id="_ans3">回答3</li>
      <li id="_ans4">回答4</li>
    </ul>
    <button type="button" id="_answer_1" onclick="answerCheck(1)">回答1</button>
    <button type="button" id="_answer_2" onclick="answerCheck(2)">回答2</button>
    <button type="button" id="_answer_3" onclick="answerCheck(3)">回答3</button>
    <button type="button" id="_answer_4" onclick="answerCheck(4)">回答4</button>
  </div>

training.js
window.addEventListener('DOMContentLoaded', function() {
  let Question = [
    ["/assets/apple.png",
    "1. ズボン",
    "2. りんご",
    "3. 時計",
    "4. 電話",
    "2"],
    ["/assets/pc.png",
    "1. 雪",
    "2. お腹",
    "3. パソコン",
    "4. ちくわ",
    "3"],
    ["/assets/cop.png",
    "1. 塩",
    "2. まつ毛",
    "3. 500円玉",
    "4. コップ",
    "4"],
    ["/assets/fish.png",
    "1. ピラミッド",
    "2. 魚",
    "3. カラス",
    "4. 石",
    "2"],
    ["/assets/cat.png",
    "1. 目",
    "2. 猫",
    "3. スプーン",
    "4. 兄",
    "2"],
    ["/assets/socks.png",
    "1. 本",
    "2. 花",
    "3. はさみ",
    "4. 靴下",
    "4"],
    ["/assets/bag.png",
    "1. かばん",
    "2. 地球",
    "3. ボンド",
    "4. ペンギン",
    "1"],
    ["/assets/chingensai.png",
    "1. タコライス",
    "2. 学校",
    "3. ちんげん菜",
    "4. カーペット",
    "3"],
    ["/assets/clock.png",
    "1. 鉛筆",
    "2. お茶",
    "3. ねずみ",
    "4. 時計",
    "2"],
    ["/assets/apple.png",
    "1. ズボン",
    "2. りんご",
    "3. 時計",
    "4. 電話",
    "2"],
  ];
  // 問題を表示するオブジェクトを取得する
  let Q = document.getElementById('_question');
  // 問題を表示するオブジェクトを取得する
  let A1 = document.getElementById('_ans1');
  let A2 = document.getElementById('_ans2');
  let A3 = document.getElementById('_ans3');
  let A4 = document.getElementById('_ans4');
  // 正解数を保持する値
  let Correct = 0;
  // 現在の問題数
  let Qcnt = 0;
  // 問題を画面に表示する処理
  function Q_Set() {
    Q.innerHTML = _question.setAttribute('src',Question[Qcnt][0]);
    A1.textContent = Question[Qcnt][1];
    A2.textContent = Question[Qcnt][2];
    A3.textContent = Question[Qcnt][3];
    A4.textContent = Question[Qcnt][4];
  };
  // 画面に表示
  Q_Set();
  // 回答ボタンを押したときの処理
  function answerCheck(ans) {
    if(ans == Question[Qcnt][5]) {
      alert("正解");
      Correct++;
    } else {
      alert("不正解");
    }
    Qcnt++;
    if (Qcnt == Question.length) {
      Q.textContent = `お疲れ様でした！10問中、正解数は${Correct}でした。`;
      A1.textContent = "";
      A2.textContent = "";
      A3.textContent = "";
      A4.textContent = "";
    } else {
      // 画面に表示
      Q_Set();
    }
  }
  return answerCheck();
});

application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></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' %>
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700,900&display=swap" rel="stylesheet">
  </head>

  <body>
    <%= yield %>
  </body>
</html>

application.js
// 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")
require("../training")


// 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)

試したこと

調べたところ、関数の中にある関数はスコープ内に閉じ込められ外部では参照できないため、明示する必要があるとのことでした。
そこで「training.js」内の下から２行に「return answerCheck();」を追記しました。
しかし結果は変わらず「Uncaught ReferenceError: answerCheck is not defined」が出てしまします。