初心者質問で申し訳ありません。
See the Pen パワハラ上司との仮想バトルフィールド by Yokki K (@Yokki-K) on CodePen.
このCodePenで作成したResultの
「はい」or「いやです」
のボタンを2つに分けてクリックするだけでもレスポンスが返ってくるようにするには
どうコードを変えていく必要があるかわからなくて困っています。
複数ボタンを作ってからCCSで調整を試みるべきでしょうか。
htmlで横並びに作って分けてからJavaScriptで機能を別々に付与するべきでしょうか。
お勧めの方法があれば教えていただければ幸いです。
よろしくお願いします。
クリックされたボタン上の位置で判別する方法はどうですか？
<button>SAMPLE</button>
<script>
const button = document.querySelector('button');
button.style.width = '200px';
button.addEventListener('click', event => {
alert(`ボタンの${event.offsetX / button.offsetWidth < .5 ? '左' : '右'}側がクリックされました`);
});
</script>
質問として書かれた内容だけを実現するにはこれがベストだと思いますが、
CodePenのサンプルではmouse hoverで色を変えてるけど、左右で別の機能にするならhoverでの色変えも別々にしないと「今押したらどちらを押したことになるのか」がわかりにくいけどいいの？
と思ってしまいます。
hoverへの反応も左右別々にしたいなら、2つの要素を並べた方がいいでしょうね。
質問者さんが言う、
クリックするだけでもレスポンスが返ってくるようにする
というのは、JavaScript を使うとかサーバー側に送信するとかして、ユーザーが Yes / No どちらを選択したのか分かるようにするということだと想像してますが、上の回答のコードでそれはできるのでしょうか？
クリックするだけでもレスポンスが返ってくるようにする
が具体的に何をするかは、CodePenのJSパートに書かれている
// 音声を認識できたら
recog.onresult = (event) => {
const recognizedWord = event.results[0][0].transcript;
result.innerText = recognizedWord;
recog.onspeechend();
if (recognizedWord === 'はい') {
music.play();
showModal('ありがとう。じゃああとはよろしく。', image1);
//music.pause();
}
if (recognizedWord === 'いやです') {
music2.play();
showModal('できれば快く「はい」と返事をしてほしいな。', image2);
//music.pause();
}
};
から推測できます。
ボタンクリックの際にもこれと同等のことをしたいのだろうから
button.addEventListener('click', event => {
if (event.offsetX / button.offsetWidth < .5) {
//はい
music.play();
showModal('ありがとう。じゃああとはよろしく。', image1);
//music.pause();
} else {
//いやです
music2.play();
showModal('できれば快く「はい」と返事をしてほしいな。', image2);
//music.pause();
}
});
でいいんじゃないでしょうか。
@Yokki01
Questioner
@jsdtue55 様
@albireo 様
@SurferOnWww 様
ご回答いただきありがとうございます。
作っていただいたサンプルボタンとコードを組み込むと意図していたものが作れるようになりました。聞いてよかったです。本当にありがとうございました。
このスレッドの課題は @jsdtue55 さんの回答で解決したようですが、であればクローズ願います。スレッドをオープンしたまま放置しないようお願いします。
チェックボックスを使ってはいかがですか？ チェックボックスを css でトグルボタンとして表示する方法もあります。方法は「html css トグルボタン」などをキーワードにしてググるといろいろ参考になりそうな記事がヒットします。例えば下記:
ON／OFFの切り替えができるトグルボタンを作ってみよう！
https://web-camp.io/magazine/archives/90654
記事の下の方に Yes / No と表示する方法も書いてあります。
自分でもググって調べてみてください。
@Yokki01
Questioner
@SurferOnWww 様
とてもわかりやすい参考記事のご提案ありがとうございます。
どういった検索をかけていけばわかりやすい記事に出会えるかがまだわかっておらず、助かりました。検索方法も教えていただきありがとうございます。
実際に作成してみました！
JavaScriptで作成することができます。
https://codepen.io/masa_mf3/pen/MWLZLYb
実際に作られたい物のイメージが湧きませんが、
細かく作り方も含めてお教えしましょうか？
@Yokki01
Questioner
@maffy_chen 様
すごくわかりやすいコードを教えていただきありがとうございます。
コードをForkさせていただき、画像や音楽を追加すればかなり凝ったクイズを作れそうな気がします。
自分でも勉強しながらいろいろ試してみます。
お気遣いいただきありがとうございます。
