Play and Stop button for Timer? JavaScript

Hi there, if you still need, something like this can be put in place by using JavaScript to display a countdown and have buttons pause and start the countdown. I found a codepen by Yaphni here that does this, and I adapted it a bit to display it within Qualtrics. The below is only for a single page, but I would recommend checking out this medium article by Matt Bloomfield for a timer implementation that spans across page breaks.
For the single page pause/start countdown timer, first create a Text/Graphic question and use the Rich Content Editor's HTML/Source view "<>" to update the Question Text with the below:

Next, update the question's JavaScript with the below:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

jQuery('#ClockContainer').detach().appendTo('#Header');

});

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
var time_in_minutes = 10;
var current_time = Date.parse(new Date());
var deadline = new Date(current_time + time_in_minutes*60*1000);


function time_remaining(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 );
var days = Math.floor( t/(1000*60*60*24) );
return {'total':t, 'days':days, 'hours':hours, 'minutes':minutes, 'seconds':seconds};
}

var timeinterval;
function run_clock(id,endtime){
var clock = document.getElementById(id);
function update_clock(){
var t = time_remaining(endtime);
clock.innerHTML = 'minutes: '+t.minutes+'
seconds: '+t.seconds;
if(t.total<=0){ clearInterval(timeinterval); }
}
update_clock(); // run function once at first to avoid delay
timeinterval = setInterval(update_clock,1000);
}
run_clock('clockdiv',deadline);

var paused = false; // is the clock paused?
var time_left; // time left on the clock when paused

function pause_clock(){
if(!paused){
paused = true;
clearInterval(timeinterval); // stop the clock
time_left = time_remaining(deadline).total; // preserve remaining time
}
}

function resume_clock(){
if(paused){
paused = false;

// update the deadline to preserve the amount of time remaining
deadline = new Date(Date.parse(new Date()) + time_left);

// start the clock
run_clock('clockdiv',deadline);
}
}

// handle pause and resume button clicks
document.getElementById('pause').onclick = pause_clock;
document.getElementById('resume').onclick = resume_clock;
});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});
Finally, add the below CSS to the Style section of the survey's Look & Feel:
#ClockContainer {
text-align: center
}

#clockdiv {
 padding: .5em 1em;
 border: 1px solid #4CAF50;
 display: inline-block;
 margin: .5em;
 color:#4CAF50;
 font-family: 'Orbitron', 'Courier New', 'Courier', sans-serif;
 text-align: center;
 }

#HeaderContainer {
 top: 0;
 position: fixed;
 width: 100%;
 left: 0;
 right: 0;
 background: #fff;
 background-color: #fff;
 border-bottom: 1px solid #ddd;
 margin-top: 0;
 z-index: 999;
min-height: 60px
}

@media screen and (max-width: 480px) {

#clockdiv {
 font-size: 12px; 
 padding: 1px;
 margin: 0;
}

}