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

前提・実現したいこと

サーバーサイド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を保存することは可能なのでしょうか？
やり方が全くわからず、行き詰まっています。

どなたかアクションプランやこうすればいいのではないかということをご教示いただけたら幸いです。