Count Down Seconds

KNIME Server
1

Hi everyone,

I want to create a test application with Knime on webportal like a Knime certification exam.
But I couldn’t create a count down time such as 2 minutes for all questions.
Also, the user could see remaining time for the question.
Is it possible to make it with existing nodes ?

Best regards.

2

Hi @volkancamas,

You can build your own JavaScript widgets using the Generic JavaScript View node. For the countdown in the certification exam, I have done exactly that with the following JavaScript code:

var clockdiv = document.createElement("div");
clockdiv.id = "clockdiv";

// Hours
var hours = document.createElement("div");
var tempSpan = document.createElement("span");
tempSpan.className = "hours";
hours.append(tempSpan);
var temp = document.createElement("div");
temp.className = "smalltext";
temp.innerHTML = "Hours";
hours.append(temp);
clockdiv.append(hours);

// Minutes
var minutes = document.createElement("div");
var tempSpan = document.createElement("span");
tempSpan.className = "minutes";
minutes.append(tempSpan);
var temp = document.createElement("div");
temp.className = "smalltext";
temp.innerHTML = "Minutes";
minutes.append(temp);
clockdiv.append(minutes);

// Seconds
var seconds = document.createElement("div");
var tempSpan = document.createElement("span");
tempSpan.className = "seconds";
seconds.append(tempSpan);
var temp = document.createElement("div");
temp.className = "smalltext";
temp.innerHTML = "Seconds";
seconds.append(temp);
clockdiv.append(seconds);

$("body").append(clockdiv);

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  return {
    'total': t,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var deadline = new Date(Date.parse(new Date()) + 3 * 60 * 1000);
initializeClock('clockdiv', deadline);

Please note that you’ll have to activate jQuery as a dependency in the node configuration for this to work. You can put this node into a component and use it together with any other regular widget node.

Best regards,
Stefan

4 Likes