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

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

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

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

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

JavaScript

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

Q&A

0回答

966閲覧

rubyのDBとjsのデータを紐づけたい

branchpeach

総合スコア12

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

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

JavaScript

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

0グッド

0クリップ

投稿2021/04/09 05:56

前提・実現したいこと

サーバーサイド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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問