Progressbar Timer mit nur neu geladen auf Seitenaktualisierung

Question

Wir erstellen ein Screening-Tool und das ist der Fragen Teil. Es gibt eine Fortschrittsleiste unter der Frage mit der Uhrzeit, aber es füllt nur die Leiste oder zeigt den Fortschritt an, wenn Sie die Seite neu laden.

Dies ist der Code

public function screening(Request $request){ 

     $user_test = User_test::find(Session::get('user_test_id')); 
     $test = $user_test->test; 

     var_dump($user_test->questionsLeft()); 

     $time = floor((strtotime(date('Y-m-d H:i:s')) - strtotime($user_test->started_at))/60); 

     if($test->time <= $time){ 
      $user_test->unanswered = array_sum($user_test->questionsLeft()); 
      $user_test->finished_at = date('Y-m-d H:i:s'); 
      $user_test->score = $user_test->calculateScore(); 
      $user_test->save(); 
      return Redirect::route('user.dashboard')->with('error', ['test timed out']); 
     } 

     //Get user test object 
     $test = $user_test->test; 

     $current = $test->test_subcategories()->sum('amount') - array_sum($user_test->questionsLeft()) + 1; 

     //Get next question 
     if(Session::get('question_id') == null){ 
      $question = $user_test->getNextQuestion(); 
      Session::flash('question_id', $question->id); 
     } else if(!$user_test->answers()->where('question_id', Session::get('question_id'))->exists()){ 
      $question = Question::find(Session::get('question_id')); 
     } else { 
      $question = $user_test->getNextQuestion(); 
      Session::flash('question_id', $question->id); 
     } 

     // Calculate time 
     if($user_test->started_at == null){ 
      return Redirect::route('user.dashboard'); 
     } else { 
      $time = round((strtotime(date('Y-m-d H:i:s')) - strtotime($user_test->started_at))/60); 
     } 

     $lang = Sentinel::check()->text_lang_code; 

     return view('screening.test', array(
      'test' => $test, 
      'question' => $question, 
      'lang' => $lang, 
      'time' => $time, 
      'current' => $current 
     )); 
    } 

Dies ist die progressbar

<progress value="{{$time}}" max="{{$test->time}}"></progress> 

Answer 1

Füllen/Aktualisierung Fortschrittsbalken ist Front-End-Job. Sie müssen eine jax-Anfrage berechnen und dann basierend auf der Fortschrittsanzeige der Antwortaktualisierung jQuery verwenden.

etwas wie Sie bekommen Antwort von Ajax

$.ajax({ 
    url: "{your path}", 
}) 
    .done(function(data) { 
     jQuery('progress').attr('value',time); 
     jQuery('progress').attr('max',test.time); 
    }); 

Answer 2

Dies ist, wie wir es geschafft, rechts

$(document).ready(function(){ 
    var progress = $('progress'); 
    progress.val(); 
    progress.prop('max'); 

    progress.data('time', progress.val()); 

    function countTimer() { 
     if(progress.data('time') < progress.prop('max') + 10){ 
      progress.val(progress.val()+1); 
      progress.data('time', progress.data('time')+1); 
     } else { 
      location.reload(); 
      console.log('timed out'); 
     } 
    } 
    var setinterval = setInterval(countTimer, 6 * 1000); 

});