2017-03-02 73 views
2

我正在使用特定的移動線框網頁,在用戶啓動計時器之後,用戶即將回答問題時,用戶啓動Web內容主體。有兩種情況如何回答問題。 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是很好的解決方案,但我可能不明白它在這種情況下的用法)。你有什麼想法,或解決方案如何做到這一點?如果這個解決方案真的很糟糕(我是網絡技術領域的新手),請隨時爲我提供更好的建議。

預先感謝您的時間。

回答

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>

+1

好吧...有趣的。我didn't知道的本地存儲existention什麼..我要查找信息關於它..好吧,如果我沒有理解好,如果用戶在本地存儲過程中刷新頁面,我將檢查剩餘多少時間留給用戶...好的,謝謝 –

+0

是的,我試過了... localStorage對我來說工作得很好......並且解決了「Date.now( )「對我來說更有用,很好的例子,謝謝......我會將問題標記爲已回答 –

相關問題