特定の期間、プログラムでWebページをリフレッシュするのを防ぐ方法はありますか？

Question

私は特定のモバイルワイヤフレームWebページで作業しています。ここでは、ユーザーのためにWebコンテンツ本体を読み込んだ後にタイマーを開始し、この間にユーザーは質問に回答します。どのように質問に答えることができるの2つのケースがあります。 1.ユーザーは時間通りに答えることができず、サーバーは応答を失敗として評価します。 2.ユーザーは、質問時間が満了するより前に回答しました。

残った秒数をカウントするスクリプトを再実行しないようにする必要があります。質問ページのフロントエンドがデータベースと通信できるようにすることを拒否します。いいえ、データベースの通信は質問応答の前後でのみ許可されます。なぜなら、応答中に接続が失われるという問題を避けたいからです。このため、私のようなタイミングのためのJSスクリプトを持って、次のとおりです。このような

iterator= 0; 
secondsMax = 15; 
elem = document.getElementById("secLeft"); 
elem.innerHTML = secondsMax ; 
function timer() { 
    setTimeout(function(){ 

    iterator++; 
    elem.innerHTML = secondsMax - iterator; 
    if(iterator == secondsMax) { 
     // progress bar move... 1 question from 5 
     move(); 
     iterator= 0; 
     //give signal to evaluate question ... 
     return; 
    } 
    timer(); 
    }, 1000); 
} 

に似たStackOverflowの質問は、ページをリロードするために、サーバからの応答与えていないために、AJAXを使用するための唯一の答えが含まれています。しかし、私はプログラムで、不正な行為を防ぐためにフロントエンドでリフレッシュするのを防ぐ必要があります（しかし、おそらくajaxは良い解決策ですが、この場合はその使用法を理解していないかもしれません）。あなたはそれをするためのアイデアや解決策を持っていますか？私は、この解決策が本当に悪い（私はウェブ技術では新しいです）場合は、批判のために開いています、私はより良いアドバイスをしてください。

ありがとうございます。

Answer 1

まず、不正なシナリオを除外するためにサーバー側の検証を行う必要があります。例えば

あなたはそのハッシュに関連する答えを受け取ると、尋ねた任意の質問は、リンクされた開始時間を持つユニークなハッシュを持っているが、あなたができる時間を比較するには、あなたは保存するために、クライアント側では...

をすることができます過ごしましたその質問の開始時刻はlocalstorageであり、読み込まれたページが現在の質問のローカルストレージエントリを見つけた場合、見つかった開始値を持つハッシュ初期化タイマー。

const TIME_ALLOWED = 10e3; // 10 sec 
 
const QUESTION_HASH = '1fc3a9903'; 
 
// start = localStorage.getItem(QUESTION_HASH) else 
 
let start = Date.now(); 
 
let timeleft = document.getElementById('timeleft'); 
 

 
let timer = setInterval(() => { 
 
    
 
    let timepass = Date.now() - start; 
 
    if (timepass >= TIME_ALLOWED) { 
 
    clearInterval(timer);  
 
    timeleft.innerText = 'Time is over'; 
 
    // localStorage.setItem(QUESTION_HASH, null) 
 
    return; 
 
    } 
 
    let secs = (TIME_ALLOWED-timepass)/1000 | 0; 
 
    let mins = secs/60 | 0; 
 
    secs = secs % 60; 
 
    if (secs < 10) secs = '0' + secs; 
 
    timeleft.innerText = `${mins}:${secs}`; 
 
}, 500); 
 

 
const answer = e => { 
 
    if (Date.now() - start >= TIME_ALLOWED) return; // disallow to answer 
 
    clearInterval(timer); 
 
    timeleft.innerText = 'Answer received'; 
 
    // localStorage.setItem(QUESTION_HASH, null) 
 
}

Time left: <span id="timeleft"></span><br/> 
 

 
<button onclick="answer()">Answer</button>