前提・実現したいこと
サーバーサイドruby
タイピング問題出力JavaScriptでタイピングゲームを作成しています。
概要としては、rubyのデータベースに登録されている単語をjavascriptを用いて出力させています
質問としては、
①カウント機能を付けたい
→カウントされたポイントをデータベースに保存したい。
②JavaScriptにて出力された単語を保存したい。
→データベースに保存されている単語とJavaScriptにて出力された単語を比較して一致したときに保存するような処理
③スコアを表示させる
→JavaScriptにて出力された単語とカウントされたポイントを表示させる。
該当のソースコード
ruby
1scores_controller 2 3class ScoresController < ApplicationController 4 def index 5 end 6 7 def new 8 @words = Word.all 9 @name = [] 10 @words.each do |word| 11 @name << word.name 12 end 13 gon.word = @name 14 end 15 16 17end 18 19
JavaScript
1 2typing.js 3 4function questions(){ 5 const question = document.getElementById("typing-words"); 6 7 8 9 var checkTexts = []; 10 11 12 function createTexts() { 13 var rnd = Math.floor(Math.random() * gon.word.length); 14 question.textContent = ''; 15 checkTexts = gon.word[rnd].split('').map(function(value) { 16 var span = document.createElement('span'); 17 span.textContent = value; 18 question.appendChild(span); 19 // console.log(span); 20 return span; 21 })}; 22 23 24 checkTexts = gon.word[0].split('').map(function(value) { 25 var span = document.createElement('span'); 26 span.textContent = value; 27 question.appendChild(span); 28 return span; 29 }); 30 31 console.log(checkTexts); 32 33 34 document.addEventListener('keydown', keydown); 35 36 function keydown(e) { 37 if (e.key === checkTexts[0].textContent) { 38 checkTexts[0].className = 'add-blue'; 39 40 checkTexts.shift(); 41 if (!checkTexts.length) createTexts(); 42 } 43 44 } 45 46 47} 48 49window.addEventListener("load", questions);
JavaScript
1 2count_down.js 3 4function count() { 5 var time = 60; 6 var counter; 7 var sec = document.getElementById("sec"); 8 var start = document.getElementById("start"); 9 var stop = document.getElementById("stop"); 10 11 12 start.onclick = function() { 13 toggle(); 14 counter = setInterval( count, 1000 ); 15 } 16 17 stop.onclick = function() { 18 toggle(); 19 clearInterval( counter ); 20 } 21 22 function toggle() { 23 if( start.disabled ) { 24 start.disabled = false; 25 stop.disabled = true; 26 } else { 27 start.disabled = true 28 stop.disabled = false; 29 } 30 } 31 32 function count() { 33 if( time === 0 ) { 34 sec.innerHTML = 0; 35 toggle(); 36 alert("1分経過しました。"); 37 clearInterval( counter ); 38 39 } else { 40 time -= 1; 41 sec.innerHTML = time % 60; 42 } 43 } 44} 45 46 47 48 49 50window.addEventListener("load", count); 51
ruby
1 2new.html.erb 3 4<%= render "shared/header"%> 5 6<body> 7 <div class="typing-word-content"> 8 <div class="typing-title">下にタイピングする文字が出ます</div> 9 <div id="typing-words"></div> 10 </div> 11 <div class="count-down-timer"> 12 <p> 13 <span id="sec">0</span> 秒 14 </p> 15 <p> 16 <input type="button" id="start" value="START"> 17 <input type="button" id="stop" value="STOP" disabled> 18 </p> 19 </div> 20 21 22 23</body> 24 25<%#= render "shared/footer"%>
DB
1# テーブル設計 2 3## users テーブル 4 5| Column | Type | Options | 6| -------- | ------ | ----------- | 7| nickname | string | null: false | 8| email | string | null: false | 9| password | string | null: false | 10 11### Association 12 13- has_many :scores 14 15## scores テーブル 16 17| Column | Type | Options | 18| ------- | ---------- | ------------------------------ | 19| point | integer | null: false | 20| user_id | references | null: false, foreign_key: true | 21 22### Association 23 24- has_many :score_words 25- has_many :words, through: :score_words 26 27## words テーブル 28 29| Column | Type | Options | 30| ----------- | ------ | ------------------------------ | 31| name | string | null: false, foreign_key: true | 32| description | text | null: false, foreign_key: true | 33 34### Association 35 36- has_many :score_words 37- has_many :scores, through: :score_words 38 39## score_words テーブル 40 41| Column | Type | Options | 42| -------- | ---------- | ------------------------------ | 43| score_id | references | null: false, foreign_key: true | 44| word_id | references | null: false, foreign_key: true | 45 46### Association 47 48- belongs_to :score 49- belongs_to :word
①カウント機能を付けたい
→カウントされたポイントをデータベースに保存したい。
②JavaScriptにて出力された単語を保存したい。
→データベースに保存されている単語とJavaScriptにて出力された単語を比較して一致したときに保存するような処理
③スコアを表示させる
→JavaScriptにて出力された単語とカウントされたポイントを表示させる。
現実的にDBに保存されているデータ (単語)をJavaScriptを用いて出力させ、タイピングゲームに出てきた単語のidとscoreを保存することは可能なのでしょうか?
やり方が全くわからず、行き詰まっています。
どなたかアクションプランやこうすればいいのではないかということをご教示いただけたら幸いです。
補足情報(FW/ツールのバージョンなど)
VSCode, MySQL
あなたの回答
tips
プレビュー