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

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

ただいまの
回答率

90.34%

  • JavaScript

    17479questions

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

  • HTML

    9539questions

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

JavaScriptでクイズを作成したい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 4,195

Tomonyuki

score 10

前提・実現したいこと

javaScriptで、クイズを作成したいと思っています。
問題表示→正誤・解説表示→次の問題…というようにページが遷移してくようにつくりたいです。また、最後に結果(成績)表示も行いたいのですが、どれだけ調べても私の力量だけでは到底実装には及びませんでした…

発生している問題・エラーメッセージ

1問目の正誤・解説表示後、2問目に進むことができません。また、回答の保存及び結果発表の仕方がわかりません。ソースコード全文をお載せします、汚いコードで申し訳ありません…

該当のソースコード

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link href="./common.css" rel="stylesheet" type="text/css">
<script src="Js/jquery-2.1.4.min.js"></script>
<style type="text/css">
.quiz{
margin:12px;
}
.correct{
color:#F00;
}
.incorrect{
color:#00F;
}
input{
    display: none;
}
label{
    display: block;
    float: left;
    cursor: pointer;
    width: 80px;
    margin: 0;
    padding: 12px 5px;
    border-right: 1px solid #abb2b7;
    background: #bdc3c7;
    color: #555e64;
    font-size: 14px;
    text-align: center;
    line-height: 1;
    transition: .2s;
}
label:first-of-type{
    border-radius: 3px 0 0 3px;
}
label:last-of-type{
    border-right: 0px;
    border-radius: 0 3px 3px 0;
}
input[type="radio"]:checked + label {
    background-color: #a1b91d;
    color: #fff;
}
</style>
</head>
<body>
<div class="news">
<div class="info">審判員クイズ</div>
</div>
<script>
  var correct = "<h3 class='correct'>正解!</h3>";
  var incorrect = "<h3 class='incorrect'>はずれ…</h3>";
  $(function () {
      $(".quiz").html("クイズ1問目問題<label><input type='radio' value='1'>クイズ1-1</label><label><input type='radio' value='2'>クイズ1-2</label><label><input type='radio' value='3'>クイズ1-3</label>");
      $('input').click(function() {
          $('.wrapper').fadeOut(500);
          $('.wrapper').hide();
          if ($(this).val() == 2) 
          $(".quiz").html(correct);
              else $(".quiz").html(incorrect);
          $(".commentary").html("クイズ1問目解説<a href='javascript:question2();'>次の問題へ</a>");
          $('.wrapper').fadeIn(500);
      });

      function question2() {
          $(".quiz").html("クイズ2問目問題\
                       <label><input type='radio' value='1'>クイズ2-1</label>\
                       <label><input type='radio' value='2'>クイズ2-2</label>\
                       <label><input type='radio' value='3'>クイズ2-3</label>");
      $(".commentary").html("");
      $('input').click(function() {
        $('.wrapper').fadeOut(500);
        $('.wrapper').hide();
        if ($(this).val() == 2) $(".quiz").html(correct);
        else $(".quiz").html(incorrect);
        $(".commentary").html("クイズ2問目解説<a href='javascript:question3()'>次の問題へ</a>");
        $('.wrapper').fadeIn(500);
          });
    }

    function question3() {
      $(".quiz").html("クイズ3問目問題\
                       <label><input type='radio' value='1'>クイズ3-1</label>\
                       <label><input type='radio' value='2'>クイズ3-2</label>");
      $(".commentary").html("");
      $('input').click(function() {
        $('.wrapper').fadeOut(500);
        $('.wrapper').hide();
        if ($(this).val() == 2) $(".quiz").html(correct);
        else $(".quiz").html(incorrect);
        $(".commentary").html("クイズ3問目解説<a href='javascript:question3()'>結果を見る</a>");
        $('.wrapper').fadeIn(500);
      });
    }
  });
</script>
<div class="wrapper">
  <div class="quiz"></div>
  <div class="commentary"></div>
</div>
</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+4

このようにすると動くと思います。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <style type="text/css">
        .quiz {
            margin: 12px;
        }

        .correct {
            color: #F00;
        }

        .incorrect {
            color: #00F;
        }

        input {
            display: none;
        }

        label {
            display: block;
            float: left;
            cursor: pointer;
            width: 80px;
            margin: 0;
            padding: 12px 5px;
            border-right: 1px solid #abb2b7;
            background: #bdc3c7;
            color: #555e64;
            font-size: 14px;
            text-align: center;
            line-height: 1;
            transition: .2s;
        }

        label:first-of-type {
            border-radius: 3px 0 0 3px;
        }

        label:last-of-type {
            border-right: 0px;
            border-radius: 0 3px 3px 0;
        }

        input[type="radio"]:checked + label {
            background-color: #a1b91d;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="news">
    <div class="info">審判員クイズ</div>
</div>
<div class="wrapper">
    <div class="quiz"></div>
    <div class="commentary"></div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    var correct = "<h3 class='correct'>正解!</h3>";
    var incorrect = "<h3 class='incorrect'>はずれ…</h3>";
    $(function () {
        $(".quiz").html("クイズ1問目問題<label><input type='radio' value='1'>クイズ1-1</label><label><input type='radio' value='2'>クイズ1-2</label><label><input type='radio' value='3'>クイズ1-3</label>");
        $('input').click(function () {
            $('.wrapper').fadeOut(500);
            $('.wrapper').hide();
            if ($(this).val() == 2)
                $(".quiz").html(correct);
            else $(".quiz").html(incorrect);
            $(".commentary").html("クイズ1問目解説<a href='javascript:question2();'>次の問題へ</a>");
            $('.wrapper').fadeIn(500);
        });
    });
    function question2() {
        $(".quiz").html("クイズ2問目問題\
                       <label><input type='radio' value='1'>クイズ2-1</label>\
                       <label><input type='radio' value='2'>クイズ2-2</label>\
                       <label><input type='radio' value='3'>クイズ2-3</label>");
        $(".commentary").html("");
        $('input').click(function () {
            $('.wrapper').fadeOut(500);
            $('.wrapper').hide();
            if ($(this).val() == 2) $(".quiz").html(correct);
            else $(".quiz").html(incorrect);
            $(".commentary").html("クイズ2問目解説<a href='javascript:question3()'>次の問題へ</a>");
            $('.wrapper').fadeIn(500);
        });
    }

    function question3() {
        $(".quiz").html("クイズ3問目問題\
                       <label><input type='radio' value='1'>クイズ3-1</label>\
                       <label><input type='radio' value='2'>クイズ3-2</label>");
        $(".commentary").html("");
        $('input').click(function () {
            $('.wrapper').fadeOut(500);
            $('.wrapper').hide();
            if ($(this).val() == 2) $(".quiz").html(correct);
            else $(".quiz").html(incorrect);
            $(".commentary").html("クイズ3問目解説<a href='javascript:question3()'>結果を見る</a>");
            $('.wrapper').fadeIn(500);
        });
    }
</script>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • JavaScript

    17479questions

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

  • HTML

    9539questions

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