ブラインドタッチ練習ゲーム<javascript>を投稿しようと頑張ってみたが・・

ブラインドタッチ練習ゲーム<javascript>を投稿しようと頑張ってみたが・・

wordpressの投稿画面にhtmlは入力できるが、javascriptの読み込みとcssの読み込みがうまくいかず。

というか、どうやったらいいのかずっと調べているが解決になかなか至らずとりあえず休憩。

function.phpに書き込むとか、投稿画面に<div>タグで囲って<script>で記入するなどいろいろできましたが。。。

html

<h1>ブラインドタッチの練習</h1>

<div class="container">

<p><span id="span">ここに表示されます</span></p>

<form name="form" >

<select name ="yubi"size= "5" class="selectbox" >

<option class="selectbox">--- どの指を練習しますか？ ---</option>

<option class="selectbox" value="0">人差し指</option>

<option class="selectbox" value="1">中指</option>

<option class="selectbox" value="2">薬</option>

<option class="selectbox" value="3">小指</option>

</select>

</form>

<input type="button" id = "reset" value="リセット" />

javascript

'use strict'

{

let hoge = new Array(4);

hoge[0] = ['u','v','n','t'];

hoge[1] = ['i','8','e','c'];

hoge[2] = ['o','.','w','x'];

hoge[3] = ['q','z','p','/'];

const span = document.getElementById('span');

let num = 0;

let number;

// console.log(hoge[2]);

//問題をランダムにする

function cardRandom(){

number = hoge[num].splice(Math.floor(Math.random() * hoge[num].length),1)[0];

console.log(number);

span.textContent = number;

}

// select要素を取得

const yubi = document.querySelector("select[name=yubi]");

yubi.addEventListener('change', function(){

num = yubi.value;

console.log(num);

cardRandom();

});

//キー入力の情報を取得

document.addEventListener('keydown', (e)=> {

let key = e.key;

if(key !== number){

return;

}

console.log(key);

if(hoge[num].length === 0){

span.textContent = 'よくできました!';

return;

}

cardRandom()

});

//リセット

document.getElementById('reset').addEventListener('click',()=>{

window.location.reload();

});

}