Sử dụng gem jquery-countdown-rails

Sử dụng gem này là rất cần thiết khi bạn làm các dự án có các bài kiểm tra cần đếm ngược thời gian

Cài đặt

Thêm dòng này vào Gemfile của ứng dụng của bạn:

gem "jquery-countdown-rails"

Và sau đó thực hiện:

$ bundle

Hoặc cài đặt nó cho mình như:

$ gem install jquery-countdown-rails

Trong application.js thêm dòng:

//= require jquery.countdown

Tương tự trong application.css thêm dòng:

*= require jquery.countdown

=> Hoàn tất việc cài đặt cho gem.

Sử dụng Trong application.js

var countdown = function() {
  $('#clock').countdown({ //clock là thẻ chứa bộ đếm đồng hồ
    until: $('#remaining_time').val(), //thời gian đếm
    format: 'HMS', //địn dạng thời gian
    onExpiry: function() {
      $('.submit-time-out').hidden(); //submit khi hết giờ
    }
  });
}

document.addEventListener('turbolinks:load', countdown);
$(document).on('page:update', countdown);

Trong view

  <%= hidden_field_tag :remaining_time, @remaining_time %>
  <div class="timer">
    <h4>Remaining Time</h4>
    <div id="clock"></div>
  </div>