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

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

ただいまの
回答率

90.03%

MONACAでのクイズアプリ作成において、テキストボックス内への問題のランダム表示+タイムの保存

受付中

回答 1

投稿

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

atum-crowd.

score 6

前提・実現したいこと

テキストボックス内にいくつかのテキストをランダム表示させたい。
ストップウォッチ静止時に、タイムを保存し、別のページに表示させたい。

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

エラーメッセージ

該当のソースコード

全体のホーム的ページ
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<link rel="stylesheet" href="components/loader.css">
<script src="components/loader.js"></script>
<script>
</script>

</head>
<body>

<p><font size="7" color="#00ff00">DNA転写・翻訳</font></p>
<hr>
<img src="http://livedoor.blogimg.jp/science_q/imgs/0/8/08b1325f.jpg"><br>
<a href="apage.html"style="font-size:15pt;font-weight:bold;">DNA転写・翻訳ゲームへ</a><br>
<a href="midlepage.html"style="font-size:15pt;font-weight:bold;">DNA転写・翻訳の仕組みへ</a></br>
<a href="Samplepage1.html"style="font-size:15pt;font-weight:bold;">サンプルページへ</a><br>
<a href="bpage.html"style="font-size:12pt;font-weight:bold;">正解はこちら</font></p>
<hr>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<script type="text/javascript" charset="utf-8" src="components/loader.js"></script>
<script src="js/ncmbController.js"></script>
<script type="text/javascript" charset="utf-8">

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

window.alert("Create a database and display the content");

}

function executeQuery(tx) {
tx.executeSql('CREATE TestTable (time)');
}
</script>
</head>
</html>

問題を出題し、回答を記入するページ
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
</script>
</head>
<body>
<p><font size="6" color="#00ff00">タイムトライアル転写</font></p>
<hr>      
<div class="container">
<h1 id="timerLabel">00:00:00</h1>

①ここをクリック
<br>
<input type="button" class="myButton" onclick="start()" value="スタート" id="startBtn">
<br><br>
<form name="myform"><input size="20" type="text" name="mytext"></form>
<br>
<input type="button" value="問題を表示" onclick="hyouji1()">
<br><br>
<form name="form1" id="id_form1" action="">
<input name="textBox1" id="id_textBox1" type="text" value="" />
<br>
<input type="button" value="Exec" onclick="onButtonClick();" />
</form>
<br>
<form><input type="button" value="問題を表示" onclick="hyouji2()"></form>

<br><br>

③ここをクリック
<br>
<input type="button" class="myButton" onclick="stop()" value="ストップ">
<br>
<location.href = 'boxpage.html';>

<br><br>
<a href="newpage.html"style="font-size:15pt;font-weight:bold;">タイムトライアル翻訳へ</a>  
</div>

<script>
var status = 0;
var time = 0;
var startBtn = document.getElementById("startBtn");
var timerLabel = document.getElementById('timerLabel');
function start(){
status = 1;
startBtn.disabled = true;
timer();
}
function stop(){
status = 0;
startBtn.disabled = false;
tx.executeSql('INSERT INTO TestTable (time) VALUES (min + ":" + sec + ":" + mSec;)');

}
function reset(){
status = 0;
time = 0;

timerLabel.innerHTML = '00:00:00';

startBtn.disabled = false;
}
function timer(){

if (status == 1) {
setTimeout(function() {
time++;
var min = Math.floor(time/100/60);
var sec = Math.floor(time/100);
var mSec = time % 100;
if (min < 10) min = "0" + min;
if (sec >= 60) sec = sec % 60;
if (sec < 10) sec = "0" + sec;
if (mSec < 10) mSec = "0" + mSec;
timerLabel.innerHTML = min + ":" + sec + ":" + mSec;
timer();
}, 10);
}
}
</script>
<script language="javascript">
<!--
function hyouji1(){
myform.mytext.value="TACCGTTCAGAACTAACT";
}
</script>
<script type="text/javascript">
function hyouji2() {
rand =
Math.floor(Math.random()*5);
if (rand == 0) msg = "TACCGTTCAGAACTAACT";
if (rand == 1) msg = "TACCCGTTAAAATCGACT";
if (rand == 2) msg = "TACCGTCGGAAGTGGACT";
if (rand == 3) msg = "TACGTGTCTATATATACT";
if (rand == 4) msg = "TACTTACCTCGCGGGACT";
alart(msg); 
}
</script>
</body>

</html>

保存されたタイムを表示するページ 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<link rel="stylesheet" href="components/loader.css">
<script src="components/loader.js"></script>
<script type="text/javascript" language="javascript">
function onButtonClick() {
target = document.getElementById("output");
target.innerText = document.forms.id_form1.id_textBox1.value;
}
</script>
</head>
<head>
<body>
<p><font size="6" color="#00ff00">結果</font></p>
<hr><br>
<div id="output"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<script type="text/javascript" charset="utf-8" src="components/loader.js"></script>
<script type="text/javascript" charset="utf-8">

function queryDB(tx) {
tx.executeSql('SELECT * FROM TestTable ORDER BY time ASC;');

</script>
</head>
<body>
<input type="button"onclick="createDB"text="記録を見る">
<br><br>
<a href="index.html"style="font-size:15pt;font-weight:bold;">ホームへ</a>
</body>
</html>  

試したこと

functionのifを用いてランダム表示をしようとした。
STOP時にSQLを用いてタイムを保存しようとした。

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

タイムの保存、表示のために書いてみた部分は、
ホーム的ページの
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

window.alert("Create a database and display the content");
という部分と、問題を出題し、回答を記入するページの
function stop(){
status = 0;
startBtn.disabled = false;
tx.executeSql('INSERT INTO TestTable (time) VALUES (min + ":" + sec + ":" + mSec;)');

}
という部分と、保存されたタイムを表示するページの
function queryDB(tx) {
tx.executeSql('SELECT * FROM TestTable ORDER BY time ASC;');
という部分です。          

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

0

エラー内容やらが書いてないのでどういう問題が発生してるかよくわかりませんが、

内容見る限りSPAではないので
「保存されたタイムを表示するページ」
からデータが取れたらいいとシンプルに考えて、

queryDB関数をクリック時に呼び出してますが、
データベースの利用方法
にある通り、

        var db = window.openDatabase("Database", "1.0", "TestDatabase", 200000);
        db.transaction(queryDB, errorCB);


という感じで呼ばないとtxがデータベースから取得用のオブジェクトにならないので取れないのだと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • ただいまの回答率 90.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • Monacaに関する質問
  • MONACAでのクイズアプリ作成において、テキストボックス内への問題のランダム表示+タイムの保存