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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

JS練習用にて3択アプリ作成中

SHIROU3
SHIROU3

総合スコア0

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0評価

0クリップ

18閲覧

投稿2019/07/14 04:52

前提・実現したいこと

JSにて3択アプリを順番に押す時間制限付きのアプリに改変したい
下記のソースコードを
A、B、Cをランダム配置で表示して順に押していくゲームにしたいです。
時間制限付きで10回連続で、YouTubeへ転移する。1回でもミスするとやり直し。

分からない点

1.下記のアプリは、正解を配列先頭に固定して正誤判定しています。(子要素をランダムにしないためスプレッド演算子も使用) これをランダムに並んだA-B-C表示から順にA-B-Cを押すと正解として、 間違えた時点で次の問題へ、とする場合には、 正解判定の専用の配列を用意し、ifにて3回判断するで良いでしょうか。 2.時間経過にて表示転移する機能実装したいです。 ex)例えば3s経つと、不正解判定になり、次のランダム表示をする。 この場合どういった関数とアルゴリズムが考えられますか? 3. `` //配列表示関数()  //ランダム関数()で回す // 順番に押したか確認する関数 // YES=>次の問題表示正解カウンタ++ // No=>間違えた瞬間スキップして次の問題へ //whileにてfirstchild削除 // 配列表示関数()  //ランダム関数()で回す 〜上記を10回 // 最終的に連続正解したか確認する(10回連続) // YES=>動画へ飛ばす // No=>リプレイ `` この流れで良いでしょうか? 4.CSSですが、li要素の下の間隔を少し空けたいですがうまく反映されません。

該当のソースコード

JS

'use strict'; { const question = document.getElementById('question'); const btn = document.getElementById('btn'); const choices = document.getElementById('choices'); const result = document.getElementById('result'); const scoreLabel = document.querySelector('#result > p'); const quizSet = [ { q: '世界で一番大きな湖は?', c: ['カスピ海', 'カリブ海', '琵琶湖'] }, { q: '2の8乗は?', c: ['256', '64', '1024'] }, { q: 'いま、何問目?', c: ['3問目', '4問目', '5問目'] }, ]; let currentNum = 0; let isAnswered; let score = 0; function shuffle(arr) { for (let 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 checkAnswer(li) { if (isAnswered) { return; } isAnswered = true; if (li.textContent === quizSet[currentNum].c[0]) { li.classList.add('correct'); score++; } else { li.classList.add('wrong'); } btn.classList.remove('disabled'); } 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', () => { checkAnswer(li); }); choices.appendChild(li); }); if (currentNum === quizSet.length - 1) { btn.textContent = 'Show Score'; } } setQuiz(); btn.addEventListener('click', () => { if (btn.classList.contains('disabled')) { return; } btn.classList.add('disabled'); if (currentNum === quizSet.length - 1) { // console.log(`Score: ${score} / ${quizSet.length}`); scoreLabel.textContent = `Score: ${score} / ${quizSet.length}`; result.classList.add('show'); } else { currentNum++; setQuiz(); } }); }

HTML

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Quiz</title> <link rel="stylesheet" href="../portfolio_saga/css/style.css"> </head> <body> <div class="container"> <p id="question"></p> <ul id="choices"></ul> <div id="btn" class="disabled">Next</div> <section id="result"> <p>Score: 3 / 3</p> <a href="">Replay?</a> </section> </div> <script src="../portfolio_saga/main.js"></script> </body> </html>

CSS

body { background: #efdec1; font-size: 30px; font-family: Verdana, sans-serif; } .container { width: 700px; height: 650px; margin: 8px auto; background: #fff; border-radius: 4px; padding: 16px; position: relative; } #question { margin-bottom: 16px; font-weight: bold; /* margin: auto; */ text-align: center; } #choices { list-style: none; padding: 0; margin-bottom: 40px; font-size: 40px; text-align: center; } #choices > li { width: 500px; border: 3px solid #ccc; border-radius: 7px; padding: 30px; /* margin-bottom: 20px; */ cursor: pointer; margin: auto; } #choices > li:hover { background: #f8f8f8; } #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!"; } #btn, #result > a { background: #3498db; padding: 8px; border-radius: 4px; cursor: pointer; text-align: center; color: #fff; box-shadow: 0 4px 0 #2880b9; } #btn.disabled { background: #ccc; box-shadow: 0 4px 0 #bbb; opacity: 0.7; } #result { position: absolute; width: 300px; background: #fff; padding: 30px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); /* top: 50px; */ /* 画面外に */ top: -500px; left: 0; right: 0; margin: 0 auto; border-radius: 3px; text-align: center; /* ゆっくり終わる */ transition: 0.4s ease-out; } /* 元の位置に戻ってくる */ #result.show{ top:50px; } #result > p { font-size: 24px; } #result > a { display: block; text-decoration: none; }

宜しくお願いいたします。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

kei344
kei344

2019/07/14 04:59

(質問文は編集できます)「分からない点」はコードブロックから出したほうが読みやすいと思います。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。