質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

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

daicheez
daicheez

総合スコア1

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0評価

1クリップ

273閲覧

投稿2022/01/27 09:10

前提・実現したいこと

環境:Ruby on Rails, JavaScript

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

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

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

コンソールでは

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」内の下から2行に「return answerCheck();」を追記しました。
しかし結果は変わらず「Uncaught ReferenceError: answerCheck is not defined」が出てしまします。

補足情報(FW/ツールのバージョンなど)

ruby '2.6.5'
rails '~> 6.0.0'

なかなか解決できず困っております。どのたかお力添えして頂けると助かります!

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。