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

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

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

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

Q&A

解決済

2回答

1661閲覧

クイズ 問題の文章を少しずつ表示

Asylum35aO2

総合スコア17

JavaScript

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

0グッド

0クリップ

投稿2019/04/09 05:17

Javascriptの練習のために、以下のようなクイズを作りました。
もう少し改良しようと、以下の挙動を導入したいと思っております。
「問題の文章の箇所は、1文字ずつ出てくるようにして、早押し形式にしてみる」
例)世・界・で・1・番・大・き・な〜 といった感じです。

setintervalなどを使って、100ms毎に問題を出していくような処理をするやり方などがある、と調べた結果わかったのですが、
もう少しヒント、特にとっかかりをどういう風に書いたらいいか等、のヒントを頂けると助かります。よろしくお願いいたします。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Quiz</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div class="container"> <p id="timer"></p> <p id="scoreShow"></p> <p id="question"></p> <ul id="choices"> <!-- <li>A0</li> <li>A1</li> <li>A2</li> --> </ul> <div id="btn" class="disabled">Next</div> <section id="result"> <p></p> <a href="">REPLAY?</a> </select> </div> <script src="js/main.js"></script> </body> </html>
body { background: #efdec1; font-size: 14px; font-family: Verdana, sans-serif; } .container { width: 400px; margin: 8px auto; background: #fff; border-radius: 4px; padding: 16px; position: relative; } #question { margin-bottom: 16px; font-weight: bold; } #choices { list-style: none; padding: 0; margin-bottom: 16px; } #choices > li { border: 1px solid #ccc; border-radius: 4px; padding: 10px; margin-bottom: 10px; cursor: pointer; } #choices > li:hover{ background: #f8f8f8; } #btn { background: #3498db; padding: 10px; border-radius: 4px; cursor: pointer; color: #fff; text-align: center; box-shadow: 0 4px 0 #2880b9; } #btn.disabled { background: #ccc; box-shadow: 0 4px 0 #bbb; opacity: 0.7; } #choices > li.correct { background: #d4edda; border-color: #c3e6cb; color: #155724; font-weight: bold; } #choices > li.correct::after { content: "....Correct!"; } #choices > li.wrong { background: #f8d8da; border-color: #f5c6cb; color: #721c24; font-weight: bold; } #choices > li.wrong::after { content: "....Wrong!"; } #result { position: absolute; width: 300px; background: #fff; padding: 30px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); top: -500px; left: 0; right: 0; margin: 0 auto; border-radius: 3px; text-align: center; transition: 0.4s ease-out; } #result > p { font-size: 14px; } #result > a { background: #3498db; padding: 10px; border-radius: 4px; cursor: pointer; color: #fff; text-align: center; box-shadow: 0 4px 0 #2880b9; display: block; text-decoration: none; } #result.show { top: 50px; } #btn.startgreen{ background: lightgreen; box-shadow: 0 4px 0 green; } #scoreShow { float: right; color: purple; }
'use strict'; { const question = document.getElementById('question'); const btn = document.getElementById('btn'); const choices = document.getElementById('choices'); const result = document.getElementById('result'); const timer = document.getElementById('timer'); const scoreLabel = document.querySelector('#result > p'); let scoreShow = document.getElementById('scoreShow'); let isAnswered = false; let countdown = false; let seconds = 10; let timerId; let isPlaying; const interval = 100; const quizSet = [ {q: '世界で一番大きな湖は?', c:['カスピ海', '黒海', '琵琶湖']}, ]; let currentNum = 0; let score = 0; function init(){ isPlaying = false; btn.classList.add('startgreen'); btn.classList.remove('disabled'); btn.textContent = 'Quiz Start'; } function checkAnswer(li) { if (li.textContent === quizSet[currentNum].c[0]){ li.classList.add('correct'); score++; } else { li.classList.add('wrong'); score--; } btn.classList.remove('disabled'); scoreShow.textContent = score; } function shuffle(arr){ let i = arr.length - 1; for(i = arr.length -1; i > 0; i--){ const j = Math.floor(Math.random() * (i + 1)); [arr[j], arr[i]] = [arr[i], arr[j]]; } return arr; } function setQuiz(){ isAnswered = false; question.textContent = quizSet[currentNum].q; while(choices.firstChild){ choices.removeChild(choices.firstChild); } const shuffledChoices = shuffle([...quizSet[currentNum].c]); shuffledChoices.forEach(choice => { const li = document.createElement('li'); li.textContent = choice; li.addEventListener('click', () => { if(!isPlaying){ return; } if(isAnswered){ return; } checkAnswer(li); isAnswered = true; }); choices.appendChild(li); }); if(currentNum === quizSet.length -1) { btn.textContent = 'Check Result!'; } } function cDownStart(){ countdown = true; timer.innerHTML = seconds; timerId = setTimeout(cDown, 1000); } function cDown(){ seconds--; timer.innerHTML = seconds; if(seconds <= 0){ clearTimeout(); countdown = false; alert(`お疲れ様です。あなたのスコアは${score}点です。`); } else { setTimeout(cDown, 1000); } } init(); btn.addEventListener('click', () => { if(!isPlaying){ cDownStart(); setQuiz(); btn.textContent = 'Next'; btn.classList.remove('startgreen'); btn.classList.add('disabled'); isPlaying = true; return; } if(btn.classList.contains('disabled')) { return; } btn.classList.add('disabled'); if(currentNum === quizSet.length -1){ scoreLabel.textContent = `お疲れ様でした。あなたのスコアは${score}点です。`; result.classList.add('show'); } else { currentNum++; setQuiz(); } }); }

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

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

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

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

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

guest

回答2

0

ベストアンサー

旧式の書き方ならこんな感じだろうか?

javascript

1 function hoge (e, text) { 2 const wait = 100; 3 4 e.textContent = ''; 5 let ary = text.split (''); 6 7 function fuga () { 8 e.textContent += ary.shift (); 9 if (ary.length) 10 setTimeout (fuga, wait); 11 }; 12 13 fuga (); 14 } 15 16-- 17 question.textContent = quizSet[currentNum].q; 18 //上の行を下に修正 19 hoge (question, quizSet[currentNum].q); 20 21

以下蛇足です。

さて、ここで問題です。途中で動作を止めたくなったら?そして再開したり、最初から表示させたくなったらどうするか?またそれらを独立して複数配置したくなったらどうするか?

javascript

1<!DOCTYPE html> 2<html lang="ja"> 3<meta charset="utf-8"> 4<title></title> 5 6<body> 7 <ul> 8 <li> 9 <li> 10 <li> 11 <li> 12 <li> 13 </ul> 14 15 16<script> 17 18{ 19 class Hoge { 20 21 constructor (target, text = '', wait = 100) { 22 this.target = target; 23 this.text = text; 24 this.wait = wait; 25 this.timerId = null; 26 this.ary = [ ]; 27 28 this.clear (); 29 } 30 31 clear () { 32 this.target.textContent = ''; 33 this.ary = this.text.split (''); 34 return this; 35 } 36 37 start () { 38 if (! this.timerId) { 39 if (! this.ary.length) 40 this.clear (); 41 this.timerId = setInterval (loop.bind (this), this.wait); 42 } 43 return this; 44 } 45 46 stop () { 47 if (this.timerId) 48 clearTimeout (this.timerId), 49 (this.timerId = null); 50 return this; 51 } 52 53 toggle () { 54 this.timerId ? this.stop (): this.start (); 55 return this; 56 } 57 58 handleEvent (event) { 59 if (event.target === this.target) 60 this.toggle (); 61 } 62 63 } 64 65 //____________________ 66 67 const loop = function () { 68 (this.ary.length) 69 ? this.target.textContent += this.ary.shift () 70 : this.stop (); 71 } 72 73 //____________________ 74 75 this.Hoge = Hoge; 76 77} 78 79//__________ 80 81const str = 'この文字列をクリックすると一旦停止します。再開はもう一度クリックしてね'; 82const li = document.querySelectorAll ('li'); 83 84let cnt = 0; 85for (let e of li) { 86 let obj = new Hoge (e, str, ++cnt * 100); 87 document.addEventListener ('click', obj, false); 88 obj.clear ().start (); 89} 90 91</script> 92

投稿2019/04/09 10:25

編集2019/04/09 11:39
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

Asylum35aO2

2019/04/09 14:27

貴重な情報頂きましてありがとうございました。まだ知らない用語が多いので、全て理解するのが大変です。splitで分割しているのは理解できました。もう少し時間をかけて解釈させて頂きたいと思います。
guest

0

スマホからの書き込みなので簡単に。

css タイプライターで調べると良いかと。
teratailにも回答あったと思います。
見つけたらurl書き込んでくださいね。

投稿2019/04/09 09:41

oikashinoa

総合スコア2826

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

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

Asylum35aO2

2019/04/09 14:25

ありがとうございました。色々なアプローチがあるのですね。さっそくタイプライダーを調べてみたいと思います。情報頂きまして感謝いたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問