I am in the process of organizing categories for the text I have. My goal is to display text from specific categories based on the color that a random video lands on. For example, if the video lands on the color red, I want text from the category labeled "when?" to appear. If it lands on the color blue, then I want text from the category labeled "how?" to be displayed, and so on...
Here is the revised code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" title="Default Styles"/>
<script>
var r_text = new Array();
r_text[0] = "How can we enhance self-organization in the upcoming sprint?";
r_text[1] = "How can we boost productivity and increase velocity?";
r_text[2] = "How can we achieve greater transparency and visibility regarding issues and challenges?";
r_text[3] = "How can our Product Owner assist us in focusing on the sprint goal?";
r_text[4] = "How can our Scrum Master help us enhance our delivery?";
r_text[5] = "How can we adopt a more T-shaped approach in the next sprint?";
r_text[6] = "How should we better celebrate our achievements?";
r_text[7] = "How can we minimize our cycle times?";
r_text[8] = "How can we make our daily scrum meetings more effective?";
r_text[9] = "How can we enhance delivery flow by implementing WIP Limits?";
r_text[10] = "How can we improve collaboration?";
r_text[11] = "How can I support someone else in the next sprint?";
r_text[12] = "How can we enhance our Sprint planning sessions?";
r_text[13] = "How can we demonstrate the Scrum Value of Courage more effectively?";
r_text[14] = "How can we embody the Scrum Value of Respect more?";
r_text[15] = "How can we display the Scrum Value of Focus more prominently?";
r_text[16] = "How can we exemplify the Scrum Value of Commitment more?";
// Repeat the above lines as needed for additional questions
var i = Math.floor(20*Math.random())
var videos = [{
id: 1,
url: "https://www.youtube.com/embed/ngUMyF9D9SQ?autoplay=1",
text: r_text[i]
},
{
id: 2,
url: "https://www.youtube.com/embed/r-l_gVPVylM?autoplay=1",
text: r_text[i]
},
{
id: 3,
url: "https://www.youtube.com/embed/6ukTzRjXcR0?autoplay=1",
text: r_text[i]
},
{
id: 4,
url: "https://www.youtube.com/embed/n5BXMNCTu8I?autoplay=1",
text: r_text[i]
},
{
id: 5,
url: "https://www.youtube.com/embed/JtwVmnMNaEY?autoplay=1",
text: r_text[i]
},
{
id: 6,
url: "https://www.youtube.com/embed/lAMgRaHP8Q4?autoplay=1",
text: r_text[i]
}
];
window.onload = function() {
function rollVideo(numberRand) {
let playerDiv = document.getElementById("random_player");
if (document.querySelector("iframe") !== null) {
document.querySelector("iframe").remove();
}
let player = document.createElement("IFRAME");
let randomVideoUrl = videos[numberRand].url;
player.setAttribute("width", "640");
player.setAttribute("height", "390");
player.setAttribute("src", randomVideoUrl);
playerDiv.appendChild(player);
document.getElementById("r_text").innerHTML = "";
document.getElementById("r_text").innerHTML = r_text[Math.floor(6*Math.random())];
}
document.getElementById("btn-roll").addEventListener("click", startRoll);
function startRoll() {
let currentNumber = Math.floor(Math.random() * videos.length);
rollVideo(currentNumber);
}
};
</script>
</head>
<div id="random_player">
<div id="r_text">
</div>
</div>
<button id="btn-roll">Roll</button>
</html>