###実現したいこと
JavaScriptでクイズを作成しています。
答えを英語でタイピングしてもらうものです。
【問題】りんごは英語で何と言いますか?
【答え】apple ←タイピングする
■仕様
・予め単語の文字数分アンダーバーを表示
・タイプした文字があっていればアンダーバーが消えていく
こんな感じです
※アンダーバーと文字の間は実際はくっつていますが、
スタイルシートで間を空けています。
↓
a p _ _ _
↓
a p p l e
試行錯誤しながら下記コードで実現できました。
###単語に空白が無い場合にうまくいくコード
Javascript
1var word = 'apple'; //答え 2var charPosition = 0; //現在何文字目か 3var englishField = document.getElementById('english'); 4var underbar = ''; //アンダーバー 5 6//答えの文字数だけアンダーバーを表示する 7for(var i = 0; i < word.length; i++){ 8 underbar += '_'; 9} 10englishField.textContent += underbar; 11 12//タイピングした文字を表示して、アンダーバーを消していく 13window.addEventListener('keyup', function(e){ 14 if(String.fromCharCode(e.keyCode) === word[charPosition].toUpperCase()){ 15 charPosition++; 16 englishField.textContent = word.substring(0, charPosition) + underbar.slice(charPosition); 17 } 18});
html
1<p>りんごは英語で何と言いますか?</p> 2<div id="english"></div>
css
1#english{ 2 letter-spacing: 5px; 3}
ただ、単語の間に空白がある場合はアンダーバーを表示せず、タイピングした際もスキップさせたいです。
例えば「green apple」が答えだった場合、下記のようにしたいです。
①最初は下記のように表示
②「greenapple」と連続で入力したら自動で間が空く
g r e e n a p p l e
下記ソースで①の「空白の場合はアンダーバーをスペースにする」ところまではなんとかできました。
ただ、「green」の「n」をタイプしたら自動的にスペースをスキップして「a」に移動してくれる、という処理がうまくいきません。
現在の単語の文字の次が空白だった場合にスキップ処理をする、というようにしたいので
if(word[charPosition + 1] === ' ')という条件でいいのかなとも思っているのですがその先に進むことができません。
###単語に空白がある場合うまくいかないコード
javascript
1var word = 'green apple'; //答え 2var charPosition = 0; //現在何文字目か 3var englishField = document.getElementById('english'); 4var underbar = ''; //アンダーバー 5var placehorder = ''; //アンダーバーとスペースを合算したもの 6 7//答えの文字数だけアンダーバーを表示するスペースは空白にする 8for(var i = 0; i < word.length; i++){ 9 if(word[i] === ' '){ 10 underbar = ' '; 11 } else { 12 underbar = '_'; 13 } 14 placehorder += underbar; 15 englishField.textContent = placehorder; 16} 17 18//タイピングした文字を表示して、アンダーバーを消していく 19window.addEventListener('keyup', function(e){ 20 if(word[charPosition + 1] === ' '){ 21 //ここで何等かの処理? 22 //例えば 23 //charPosition += 2; 24 //としてみたところgreenの「n」が表示されずappleの「a」を押したら表示されます。 25 } else if (String.fromCharCode(e.keyCode) === word[charPosition].toUpperCase()){ 26 charPosition++; 27 englishField.textContent = word.substring(0, charPosition) + placehorder.slice(charPosition); 28 } 29});
html
1<p>青りんごは英語で何と言いますか?</p> 2<div id="english"></div>
どのように記述をしたら良いでしょうか?
質問がわかり辛い場合は補足しますのでおっしゃってください。
また、そもそも全体的にもっと簡素に記述できる方法や間違いがありましたらアドバイスいただけますととても助かります。
どうぞよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/21 16:46
2017/07/21 17:06
2017/07/21 17:16