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

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

ただいまの
回答率

91.04%

  • JavaScript

    13387questions

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

  • HTML

    7285questions

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

  • CSS

    4645questions

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

  • JSON

    903questions

    JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

クイズサイトの制限時間

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 281

前提・実現したいこと

ここに質問したいことを詳細に書いてください
クイズサイトを作っているのですが、制限時間の表示を数字だけではなく、時間経過とともにバーが減少していくという形にして制限時間を表示したいです。

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

クイズスタートと同時にしようとするとうまく行きませんでした。

該当のソースコード

Javascript

var question = []; //問題データ格納用
var q_cnt = 0; //問題番号(何問目か)
var num_questions = 0; //問題数(jsonデータから数を取得)
var num_quiz = 10; //出題数(問題データからこの数の問題をランダムで出題)
var order_element = [0, 1, 2]; //選択肢の表示順(ランダムにするため)
var correct = 0; //正解数
var s_time; //ストップウォッチスタート時間
var e_time = 0; //ストップウォッチ経過時間
//<!-- とりあえず、問題設定画面以外を非表示 -->
$('#question').hide();
$('#answer').hide();
$('#result').hide();

//

//ストップウォッチの表示
function show_time(t) {
return document.getElementById("time").textContent = ('00' + ((t - t % 60000) / 60000) % 60).slice(-2) + ":" + ('00' + ((t - t % 1000) / 1000) % 60).slice(-2) + ":" + ('00' + (t - t % 10) / 10).slice(-2);
}
//ストップウォッチ
function setUserCfg(command) {
timeLabel = document.getElementById("timeLabel");
submit_user_cfg = document.getElementById("submit_user_cfg");
submit_user_cfg.style.visibility = "hidden";

// プログレスバー表示
pbar = document.getElementById("pbar").getContext("2d");
pbar.fillStyle = "rgb(200, 0, 0)";
pbar.fillRect(0, 10, 300, 10);
pbar.fillStyle = "rgb(255, 255, 255)";

finishTime = new Date();
finishTime.setTime(finishTime.getTime() + limit);

timer = setInterval("tick()", 1);
}

function tick() {
// 時間計算
var diffTime = finishTime.getTime() - new Date().getTime();
if (diffTime <= 0) {
// タイムオーバー
clearInterval(timer);
timeLabel.innerText = 'OVER!';
submit_user_cfg.style.visibility = "visible";

timer = null;
pbar = null;
timeLabel = null;
submit_user_cfg = null;

return;
}
// プログレスバー更新
pbar.fillRect(300 * (diffTime / limit), 10, 300, 10);
// 時間表示更新
var min = Math.floor(diffTime / 1000 / 60);
diffTime -= min * 1000 * 60;
var sec = Math.floor(diffTime / 1000);
diffTime -= sec * 1000;
timeLabel.innerText = ('0' + min).slice(-2) + ":" + ('0' + sec).slice(-2) + "." + ('00' + diffTime).slice(-3);
}

//シャッフル Fisher-Yates shuffle
function shuffle(array) {
var length = array.length;
for (var i = length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = array[i];
array[i] = array[j];
array[j] = tmp;
}
}

// 問題文の選択肢表示処理
function setOptions() {
document.getElementById("q_msg").textContent = question[q_cnt].msg;
if (question[q_cnt].img) {
document.getElementById("q_msg").innerHTML += "<p><img src='" + question[q_cnt].img + "'></p>";
}
shuffle(order_element);
document.getElementById("q_op1").textContent = question[q_cnt].options[order_element[0]];
document.getElementById("q_op2").textContent = question[q_cnt].options[order_element[1]];
document.getElementById("q_op3").textContent = question[q_cnt].options[order_element[2]];
}

// 「つぎへ」を押した時の処理
function nextQuestion() {
q_cnt++;
if (q_cnt == num_questions) {
console.log("END");
$('#configuration').hide();
$('#question').hide();
$('#answer').hide();
$('#result').show();
s_watch("update");
document.getElementById('result_msg').textContent = num_questions + "もんちゅう " + correct + "もん せいかいでした";
} else {
setOptions();
$('#configuration').hide();
$('#question').show();
$('#answer').hide();
setUserCfg("start");
setUserCfg("update");
}
}

// 解答した時の処理
function checkAnswer(options) {
s_watch("stop");
s_watch("update");
$('#configuration').hide();
$('#question').hide();
$('#answer').show();
if (order_element[options] == 0) {
document.getElementById("a_msg").textContent = "せいかい! ";
correct++;
} else {
document.getElementById("a_msg").textContent = "ふせいかい! ";
}
document.getElementById("a_msg").textContent += question[q_cnt].options[0];
document.getElementById("a_cmt").textContent = question[q_cnt].ans.comment;
if (question[q_cnt].ans.img) {
document.getElementById("a_cmt").innerHTML += "<p><img src='" + question[q_cnt].ans.img + "'></p>";
}

if (q_cnt == num_questions - 1) {
document.getElementById("b_next").textContent = "けっかへ"
}
}

// 問題の設定が決定した時の処理
function setUserCfg() {
var cfg = document.forms.user_cfg;
//for IE
for( i = 0; i < cfg.level.length; i++ ){
if( cfg.level[i].checked == true ){
cfg.level.value = cfg.level[i].value;
}
}
for( i = 0; i < cfg.genre.length; i++ ){
if( cfg.genre[i].checked == true ){
cfg.genre.value = cfg.genre[i].value;
}
}
//for IE END 
console.log("--------------");
console.log(cfg.level.value);
console.log("選ばれたレベル、ジャンル");
console.log(cfg.level.value);
console.log(cfg.genre.value);
console.log("--------------");
// データファイル読み込み ()
$.ajax({
url: "./quiz_data/" + cfg.genre.value + "_" + cfg.level.value + ".json",
cache: false,
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (data) {
//読み込んでする処理
question = data; //グローバル変数に渡す
num_questions = data.length; //問題数取得。多分いらなくなる
},
complete: function () {
//読み込み終了を待ってから行う処理
shuffle(question); //問題の順を入れ替え
//データが出題数以上なら出題数に
while (question.length > num_quiz) {
question.pop();
}
num_questions = question.length; //問題数を再設定
setOptions(); //選択肢の順を入れ替え
}
});
$('#configuration').hide();
$('#question').show();
$('#type').hide();
setUserCfg("start");
}
}

試したこと

ストップウォッチ形式になっているプログラムをそのまま書き換えてみたのですが、やはりというべきか駄目でした。

補足情報(言語/FW/ツール等のバージョンなど)

HTML/CSS jsファイル、JSONファイルを使用しています。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/12/24 18:57

    書かれている状況が再現するコード(HTML/JSON/JavaScriptなど)か、再現するURLを提示されたほうが回答を得やすいと思います。また、質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

    キャンセル

回答 1

checkベストアンサー

0

提示されたソースは jQuery やら、ネイティブ JavaScript が混ざっていて読みにくいので、勝手バージョンでサンプル作成しました。

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>Example for Bootstrap</title>

        <!-- Bootstrap core CSS -->
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet">
        <style type="text/css">
            .progress {
                margin-top: 40px;
            }
        </style>
    </head>

    <body>
        <main role="main" class="container">
            <div class="progress">
                <div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
            </div>
        </main>

        <!-- Bootstrap core JavaScript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="//getbootstrap.com/assets/js/vendor/popper.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var minutes = 1;
                var seconds = minutes * 60;
                var countdown = function () {
                    seconds--;
                    var percent = Math.ceil(seconds * 100 / (minutes * 60));
                    if (percent >= 0) {
                        $(".progress-bar")
                                .attr('aria-valuenow', percent)
                                .css('width', percent + '%')
                                .text(percent + '%');
                    }
                };
                setInterval(countdown, 1000);
            });
        </script>
    </body>
</html>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • ただいまの回答率 91.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • JavaScript

    13387questions

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

  • HTML

    7285questions

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

  • CSS

    4645questions

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

  • JSON

    903questions

    JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。