Custom Countdown Timer on Auto-Advancing Trials

Qualtrics.SurveyEngine.addOnReady(function () {
	const qc = quest.getQuestionContainer();
	const timeLimit = 73000;

	const timerHTML = '<div class="timer" style="opacity:0"><span class="num"></span> Seconds Left</div>';
	qc.insertAdjacentHTML("afterbegin", timerHTML);
	const timeKeeper = qc.querySelector(".timer .num");

	timeKeeper.innerText = timeLimit / 1000;

	const timeTracker = setInterval(() => {
		const timeLeft = parseInt(timeKeeper.innerText);
		timeKeeper.innerText = timeLeft - 1;
	}, 1000);

	setTimeout(function () {
		qc.querySelector(".timer").style.opacity = "1";
	}, timeLimit - 3000);

	setTimeout(function () {
		clearInterval(timeTracker);
		quest.clickNextButton();
	}, timeLimit);
});

This does not seem to work. Are those HTML elements that would need to already be embedded somewhere else? Sorry, still learning my way around and struggling to figure out where this is going wrong. 

Just paste this in your question Javascript. It will automatically do everything for you.

Yeah, I did, but it does not seem to work. I removed the embedded Qualtrics timer I was using to record response time in case that was conflicting with the Javascript, but still nothing.  

Okay. You should have mentioned that you are using the Qualtrics timer question to autoadvance. Because the JS you had pasted is for clicking the next button which is not required if you use the auto advance in the timer question.

For that the code is really simple, add it to the JS of the timer question:

Qualtrics.SurveyEngine.addOnReady(function () {
	const quest = this;
	const qc = quest.getQuestionContainer();
	const totalTime = quest.question.runtime.Configuration.Seconds * 1000;

	// Hide the timer
	qc.style.opacity = "0";

	// Show timer when 3000 ms are left
	setTimeout(() => {
		qc.style.opacity = "1";
	}, totalTime - 3000);
});

Ah this worked! Thank you so much!