failed to load config from C:UsersUSERDesktopprojectspersonal-webvite.config.ts
error when starting dev server:
Error: spawn EFTYPE
at ChildProcess.spawn (node:internal/child_process:420:11)
at Object.spawn (node:child_process:753:9)
at ensureServiceIsRunning (C:UsersUSERDesktopprojectspersonal-webnode_modulesesbuildlibmain.js:1987:29)
at build (C:UsersUSERDesktopprojectspersonal-webnode_modulesesbuildlibmain.js:1885:26)
at bundleConfigFile (file:///C:/Users/USER/Desktop/projects/personal-web/node_modules/vite/dist/node/chunks/dep-Bxmd1Uxj.js:49196:24)
at async bundleAndLoadConfigFile (file:///C:/Users/USER/Desktop/projects/personal-web/node_modules/vite/dist/node/chunks/dep-Bxmd1Uxj.js:49180:19)
at async loadConfigFromFile (file:///C:/Users/USER/Desktop/projects/personal-web/node_modules/vite/dist/node/chunks/dep-Bxmd1Uxj.js:49144:44)
at async resolveConfig (file:///C:/Users/USER/Desktop/projects/personal-web/node_modules/vite/dist/node/chunks/dep-Bxmd1Uxj.js:48640:24)
at async _createServer (file:///C:/Users/USER/Desktop/projects/personal-web/node_modules/vite/dist/node/chunks/dep-Bxmd1Uxj.js:38250:18)
at async CAC. (file:///C:/Users/USER/Desktop/projects/personal-web/node_modules/vite/dist/node/cli.js:753:20)
PHP page – opening a youtube link in a lightbox window
I am looking to open a youtube video on a page in a jquery.fancybox.js window, it was working fine in html, but switching to .php the video doesn’t load in the jquery.fancybox.js window and doesn’t play…any suggestions?
this is the current code with a link to a youtube video
<! --- link to open youtube video - vid used is an example -->
<div class="image">
<img src="images/video-thumb.jpg" alt="watch repair video thumbnail">
<a href="https://youtube.com/shorts/BklzhlqN9Z0?si=S0x0f6pp4iMo0lgC" class="overlay-link play-now" data-fancybox="gallery" data-caption=""><span class="flaticon-play-button"></span> </a>
<span class="ripple"></span>
</div>
please let me know if more information is needed?
Looking to insert html with image and embed code textbox in results window of a quiz results when score of 100% is acheived [closed]
Expected to happen: When getting a 100% result in quiz a “prize” is displayed below the remarks which includes an image and embed code
What actually happened: It either did not work at all or it inserted it for all results and not just when full score is achieved.
I am very very new to programming so I am very out of my depth here, but I feel like this should be possible, however when trying to adjust the code it broke or did nothing at all.
Minimal Reproducible Example on codepen: https://codepen.io/Ariane-the-sasster/pen/qEdMEQN
Desired Behaivour: When the “Quiz Complete” window pop-up appears for the HTML below to be appended into the “remarks” below the rest of the information and above the “Confirm button”
HTML I want to be displayed in pop-up window (.modal-content-container) when 100% result is achieved
<a href="https://arianami.neocities.org/CatCafe.html"><img src="https://files.catbox.moe/wg0rom.gif"></a>
<textarea style="width:88px; height:31px; overflow:auto; padding:5px;"><a href="https://arianami.neocities.org"><img src="https://files.catbox.moe/wg0rom.gif"></a></textarea>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Naru chan's Cat Cafe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<body onload="NextQuestion(0)">
<main>
<!-- creating a modal for when quiz ends -->
<div class="modal-container" id="score-modal">
<div class="modal-content-container">
<h1>Congratulations, Quiz Completed.</h1>
<div class="grade-details">
<p>Attempts : 2</p>
<p>Wrong Answers : <span id="wrong-answers"></span></p>
<p>Right Answers : <span id="right-answers"></span></p>
<p>Grade : <span id="grade-percentage"></span>%</p>
<p><span id="remarks"></span></p>
/*I want to add the HTML code to the remarks section of the grade-details*/
</div>
<div class="modal-button-container">
<button onclick="closeScoreModal()">Continue</button>
</div>
</div>
</div>
<div class="game-quiz-container">
<div class="game-details-container">
<h1>Score : <span id="player-score"></span> / 2</h1>
<h1> Question : <span id="question-number"></span> / 2</h1>
</div>
<div class="game-question-container">
<h1 id="display-question"></h1>
</div>
<div class="game-options-container">
<div class="modal-container" id="option-modal">
<div class="modal-content-container">
<h1>Please Pick An Option</h1>
<div class="modal-button-container">
<button onclick="closeOptionModal()">Continue</button>
</div>
</div>
</div>
<span>
<input type="radio" id="option-one" name="option" class="radio" value="optionA" />
<label for="option-one" class="option" id="option-one-label"></label>
</span>
<span>
<input type="radio" id="option-two" name="option" class="radio" value="optionB" />
<label for="option-two" class="option" id="option-two-label"></label>
</span>
<span>
<input type="radio" id="option-three" name="option" class="radio" value="optionC" />
<label for="option-three" class="option" id="option-three-label"></label>
</span>
<span>
<input type="radio" id="option-four" name="option" class="radio" value="optionD" />
<label for="option-four" class="option" id="option-four-label"></label>
</span>
</div>
<div class="next-button-container">
<button onclick="handleNextQuestion()">Next Question</button>
</div>
</div>
</main>
<script src="Quiz.js"></script>
</body>
</body>
</html>
CSS:
/*NARU QUIZ*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, quiz-body{
height: 100%;
}
quiz-body{
font-family: 'Arial', sans-serif;
}
quiz-main{
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.game-quiz-container{
width: 550px;
height: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
border-width: 1px;
border-style: solid;
}
.game-details-container{
width: 80%;
height: 4rem;
display: flex;
justify-content: space-around;
align-items: center;
}
.game-details-container h1{
font-size: 1.2rem;
}
.game-question-container{
width: 80%;
height: 8rem;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid;
}
.game-question-container h1{
font-size: 1.1rem;
text-align: center;
padding: 3px;
}
.game-options-container{
width: 80%;
height: 12rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
font-size:0.96rem;
text-align: center;
}
.game-options-container span{
width: 13rem;
height: 3rem;
border: 1px solid;
background-color: #ffffff;
overflow: hidden;
}
span label{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.3s;
font-weight: 600;
color: black;
}
input[type="radio"] {
position: relative;
display: none;
}
input[type=radio]:checked ~ .option {
}
.next-button-container{
width: 50%;
height: 3rem;
display: flex;
justify-content: center;
}
.next-button-container button{
width: 8rem;
height: 2rem;
background: none;
color: black;
border: 1px solid;
cursor: pointer;
outline: none;
}
.next-button-container button:hover{
}
.modal-container{
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
flex-direction: column;
align-items: center;
justify-content: center;
-webkit-animation: fadeIn 1.2s ease-in-out;
animation: fadeIn 1.2s ease-in-out;
}
.modal-content-container{
height: fit-content;
width: 25rem;
background-color: #6c5e7c;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
border-style: solid;
border-width: 1px;
border-color: #382d44;
padding: 10px;
}
.modal-content-container h1{
font-size: 1.3rem;
height: 3rem;
color: ;
text-align: center;
}
.grade-details{
width: 15rem;
height: 10rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.grade-details p{
color: white;
text-align: center;
}
.modal-button-container{
height: 2rem;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.modal-button-container button{
width: 10rem;
height: 2rem;
background: none;
outline: none;
border: 1px solid;
color: white;
font-size: 1.1rem;
cursor: pointer;
}
.modal-button-container button:hover{
}
@media(min-width : 300px) and (max-width : 350px){
.game-quiz-container{
width: 90%;
height: 80vh;
}
.game-details-container h1{
font-size: 0.8rem;
}
.game-question-container{
height: 6rem;
}
.game-question-container h1{
font-size: 0.9rem;
}
.game-options-container span{
width: 90%;
height: 2.5rem;
}
.game-options-container span label{
font-size: 0.8rem;
}
.modal-content-container{
width: 90%;
height: 25rem;
}
.modal-content-container h1{
font-size: 1.2rem;
}
}
@media(min-width : 350px) and (max-width : 700px){
.game-quiz-container{
width: 90%;
height: 80vh;
}
.game-details-container h1{
font-size: 1rem;
}
.game-question-container{
height: 8rem;
}
.game-question-container h1{
font-size: 0.9rem;
}
.game-options-container span{
width: 90%;
}
.modal-content-container{
width: 90%;
height: 25rem;
}
.modal-content-container h1{
font-size: 1.2rem;
}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
JS:
//this would be the object shape for storing the questions
//you can change the questions to your own taste or even add more questions..
const questions = [
{
question: "What is Naru's pet cat named?",
optionA: "Nyanko",
optionB: "Maru",
optionC: "Koneko",
optionD: "Nyanchi",
correctOption: "optionA"
},
{
question: "What is Naru's Blood type?",
optionA: "AB",
optionB: "O",
optionC: "B",
optionD: "A",
correctOption: "optionC"
},
]
let shuffledQuestions = [] //empty array to hold shuffled selected questions
function handleQuestions() {
//function to shuffle and push 10 questions to shuffledQuestions array
while (shuffledQuestions.length <= 1) { //update this to lenth of questions you want -1 i.e if you want 16 questions then <= 15
const random = questions[Math.floor(Math.random() * questions.length)]
if (!shuffledQuestions.includes(random)) {
shuffledQuestions.push(random)
}
}
}
let questionNumber = 1
let playerScore = 0
let wrongAttempt = 0
let indexNumber = 0
// function for displaying next question in the array to dom
function NextQuestion(index) {
handleQuestions()
const currentQuestion = shuffledQuestions[index]
document.getElementById("question-number").innerHTML = questionNumber
document.getElementById("player-score").innerHTML = playerScore
document.getElementById("display-question").innerHTML = currentQuestion.question;
document.getElementById("option-one-label").innerHTML = currentQuestion.optionA;
document.getElementById("option-two-label").innerHTML = currentQuestion.optionB;
document.getElementById("option-three-label").innerHTML = currentQuestion.optionC;
document.getElementById("option-four-label").innerHTML = currentQuestion.optionD;
}
function checkForAnswer() {
const currentQuestion = shuffledQuestions[indexNumber] //gets current Question
const currentQuestionAnswer = currentQuestion.correctOption //gets current Question's answer
const options = document.getElementsByName("option"); //gets all elements in dom with name of 'option' (in this the radio inputs)
let correctOption = null
options.forEach((option) => {
if (option.value === currentQuestionAnswer) {
//get's correct's radio input with correct answer
correctOption = option.labels[0].id
}
})
//checking to make sure a radio input has been checked or an option being chosen
if (options[0].checked === false && options[1].checked === false && options[2].checked === false && options[3].checked == false) {
document.getElementById('option-modal').style.display = "flex"
}
//checking if checked radio button is same as answer
options.forEach((option) => {
if (option.checked === true && option.value === currentQuestionAnswer) {
document.getElementById(correctOption).style.backgroundColor = "rgb(189, 228, 173)"
playerScore++
indexNumber++
//set to delay question number till when next question loads
setTimeout(() => {
questionNumber++
}, 1000)
}
else if (option.checked && option.value !== currentQuestionAnswer) {
const wrongLabelId = option.labels[0].id
document.getElementById(wrongLabelId).style.backgroundColor = "rgb(247, 150, 150)"
document.getElementById(correctOption).style.backgroundColor = "rgb(189, 228, 173)"
wrongAttempt++
indexNumber++
//set to delay question number till when next question loads
setTimeout(() => {
questionNumber++
}, 1000)
}
})
}
//called when the next button is called
function handleNextQuestion() {
checkForAnswer()
unCheckRadioButtons()
//delays next question displaying for a second
setTimeout(() => {
if (indexNumber <= 1) { //update this to number of questions you want -1. determines when there's no more question and should display answer
NextQuestion(indexNumber)
}
else {
handleEndGame()
}
resetOptionBackground()
}, 1000);
}
//sets options background back to null after display the right/wrong colors
function resetOptionBackground() {
const options = document.getElementsByName("option");
options.forEach((option) => {
document.getElementById(option.labels[0].id).style.backgroundColor = ""
})
}
// unchecking all radio buttons for next question(can be done with map or foreach loop also)
function unCheckRadioButtons() {
const options = document.getElementsByName("option");
for (let i = 0; i < options.length; i++) {
options[i].checked = false;
}
}
// function for when all questions being answered
function handleEndGame() {
let remark = null
let remarkColor = null
// condition check for player remark and remark color
if (playerScore <= 0) {
remark = "Fail"
remarkColor = "black"
}
else if (playerScore >= 0 && playerScore < 1) {
remark = "Average Grades, You can do better."
remarkColor = "black"
}
else if (playerScore >= 0 && playerScore < 1) {
remark = "Excellent, Keep the good work going."
remarkColor = "black"
}
else if (playerScore = 2) {
remark = "100% Amazing!"
remarkColor = "black"
//I want to add the HTML to this parameter
}
//playerScore divided by new length of questions
const playerGrade = (playerScore / 2) * 100
//data to display to score board
document.getElementById('remarks').innerHTML = remark
document.getElementById('remarks').style.color = remarkColor
document.getElementById('grade-percentage').innerHTML = playerGrade
document.getElementById('wrong-answers').innerHTML = wrongAttempt
document.getElementById('right-answers').innerHTML = playerScore
document.getElementById('score-modal').style.display = "flex"
}
//closes score modal and resets game
function closeScoreModal() {
questionNumber = 1
playerScore = 0
wrongAttempt = 0
indexNumber = 0
shuffledQuestions = []
NextQuestion(indexNumber)
document.getElementById('score-modal').style.display = "none"
}
//function to close warning modal
function closeOptionModal() {
document.getElementById('option-modal').style.display = "none"
}
For further context I want the html image and text box to display below the “remarks” in this pop-up
Image of Pop-up showing quiz resuts
Desired Effect in image form
Image of Pop-up showing quiz results and image embed
Looking to insert html in results window of a quiz when result of 100% is acheived [closed]
Expected to happen: When getting a 100% result in quiz a “prize” is displayed below the remarks which includes an image and embed code
What actually happened: It either did not work at all or it inserted it for all results and not just when full score is achieved.
I am very very new to programming so I am very out of my depth here, but I feel like this should be possible, however when trying to adjust the code it broke or did nothing at all.
Minimal Reproducible Example on codepen: https://codepen.io/Ariane-the-sasster/pen/qEdMEQN
HTML I want to be displayed in pop-up window (.modal-content-container) when 100% result is achieved
<a href="https://arianami.neocities.org/CatCafe.html"><img src="https://files.catbox.moe/wg0rom.gif"></a>
<textarea style="width:88px; height:31px; overflow:auto; padding:5px;"><a href="https://arianami.neocities.org"><img src="https://files.catbox.moe/wg0rom.gif"></a></textarea>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Naru chan's Cat Cafe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<body onload="NextQuestion(0)">
<main>
<!-- creating a modal for when quiz ends -->
<div class="modal-container" id="score-modal">
<div class="modal-content-container">
<h1>Congratulations, Quiz Completed.</h1>
<div class="grade-details">
<p>Attempts : 12</p>
<p>Wrong Answers : <span id="wrong-answers"></span></p>
<p>Right Answers : <span id="right-answers"></span></p>
<p>Grade : <span id="grade-percentage"></span>%</p>
<p><span id="remarks"></span></p>
/*I want to add the HTML code to the remarks section of the grade-details*/
</div>
<div class="modal-button-container">
<button onclick="closeScoreModal()">Continue</button>
</div>
</div>
</div>
<div class="game-quiz-container">
<div class="game-details-container">
<h1>Score : <span id="player-score"></span> / 12</h1>
<h1> Question : <span id="question-number"></span> / 12</h1>
</div>
<div class="game-question-container">
<h1 id="display-question"></h1>
</div>
<div class="game-options-container">
<div class="modal-container" id="option-modal">
<div class="modal-content-container">
<h1>Please Pick An Option</h1>
<div class="modal-button-container">
<button onclick="closeOptionModal()">Continue</button>
</div>
</div>
</div>
<span>
<input type="radio" id="option-one" name="option" class="radio" value="optionA" />
<label for="option-one" class="option" id="option-one-label"></label>
</span>
<span>
<input type="radio" id="option-two" name="option" class="radio" value="optionB" />
<label for="option-two" class="option" id="option-two-label"></label>
</span>
<span>
<input type="radio" id="option-three" name="option" class="radio" value="optionC" />
<label for="option-three" class="option" id="option-three-label"></label>
</span>
<span>
<input type="radio" id="option-four" name="option" class="radio" value="optionD" />
<label for="option-four" class="option" id="option-four-label"></label>
</span>
</div>
<div class="next-button-container">
<button onclick="handleNextQuestion()">Next Question</button>
</div>
</div>
</main>
<script src="Quiz.js"></script>
</body>
</body>
</html>
CSS:
/*NARU QUIZ*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, quiz-body{
height: 100%;
}
quiz-body{
font-family: 'Arial', sans-serif;
}
quiz-main{
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.game-quiz-container{
width: 550px;
height: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
border-width: 1px;
border-style: solid;
}
.game-details-container{
width: 80%;
height: 4rem;
display: flex;
justify-content: space-around;
align-items: center;
}
.game-details-container h1{
font-size: 1.2rem;
}
.game-question-container{
width: 80%;
height: 8rem;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid;
}
.game-question-container h1{
font-size: 1.1rem;
text-align: center;
padding: 3px;
}
.game-options-container{
width: 80%;
height: 12rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
font-size:0.96rem;
text-align: center;
}
.game-options-container span{
width: 13rem;
height: 3rem;
border: 1px solid;
background-color: #ffffff;
overflow: hidden;
}
span label{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.3s;
font-weight: 600;
color: black;
}
input[type="radio"] {
position: relative;
display: none;
}
input[type=radio]:checked ~ .option {
}
.next-button-container{
width: 50%;
height: 3rem;
display: flex;
justify-content: center;
}
.next-button-container button{
width: 8rem;
height: 2rem;
background: none;
color: black;
border: 1px solid;
cursor: pointer;
outline: none;
}
.next-button-container button:hover{
}
.modal-container{
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
flex-direction: column;
align-items: center;
justify-content: center;
-webkit-animation: fadeIn 1.2s ease-in-out;
animation: fadeIn 1.2s ease-in-out;
}
.modal-content-container{
height: fit-content;
width: 25rem;
background-color: #6c5e7c;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
border-radius: 25px;
border-style: dashed;
border-width: 1px;
border-color: #382d44;
padding: 10px;
}
.modal-content-container h1{
font-size: 1.3rem;
height: 3rem;
color: ;
text-align: center;
}
.grade-details{
width: 15rem;
height: 10rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.grade-details p{
color: white;
text-align: center;
}
.modal-button-container{
height: 2rem;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.modal-button-container button{
width: 10rem;
height: 2rem;
background: none;
outline: none;
border: 1px solid;
color: white;
font-size: 1.1rem;
cursor: pointer;
}
.modal-button-container button:hover{
}
@media(min-width : 300px) and (max-width : 350px){
.game-quiz-container{
width: 90%;
height: 80vh;
}
.game-details-container h1{
font-size: 0.8rem;
}
.game-question-container{
height: 6rem;
}
.game-question-container h1{
font-size: 0.9rem;
}
.game-options-container span{
width: 90%;
height: 2.5rem;
}
.game-options-container span label{
font-size: 0.8rem;
}
.modal-content-container{
width: 90%;
height: 25rem;
}
.modal-content-container h1{
font-size: 1.2rem;
}
}
@media(min-width : 350px) and (max-width : 700px){
.game-quiz-container{
width: 90%;
height: 80vh;
}
.game-details-container h1{
font-size: 1rem;
}
.game-question-container{
height: 8rem;
}
.game-question-container h1{
font-size: 0.9rem;
}
.game-options-container span{
width: 90%;
}
.modal-content-container{
width: 90%;
height: 25rem;
}
.modal-content-container h1{
font-size: 1.2rem;
}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
JS:
[
{
question: "What is Naru's pet cat named?",
optionA: "Nyanko",
optionB: "Maru",
optionC: "Koneko",
optionD: "Nyanchi",
correctOption: "optionA"
},
{
question: "What is Naru's Blood type?",
optionA: "AB",
optionB: "O",
optionC: "B",
optionD: "A",
correctOption: "optionC"
},
{
question: "What is special about Naru's Birthday?",
optionA: "Doll's Festival",
optionB: "Cat Day",
optionC: "Children's Day",
optionD: "Tanabata",
correctOption: "optionA"
},
{
question: "Why did Naru initially not like her given name?",
optionA: "It sounds scary",
optionB: "She hates thunderstorms",
optionC: "It sounds too masculine",
optionD: "It was the name her parents gave her",
correctOption: "optionD"
},
{
question: "What age did Naru meet Izumi and Makoto?",
optionA: "7 years old",
optionB: "6 years old",
optionC: "4 years old",
optionD: "5 years old",
correctOption: "optionC"
},
{
question: "What is Naru's favourite colour?",
optionA: "Pink",
optionB: "Yellow",
optionC: "Lilac",
optionD: "Red",
correctOption: "optionB"
},
{
question: "What is Naru's favourite food?",
optionA: "Oyakodon",
optionB: "Miso Soup",
optionC: "Karaage Chicken",
optionD: "Chicken Katsudon",
correctOption: "optionC"
},
{
question: "What is an accessory Naru is rarely seen without?",
optionA: "Rings",
optionB: "Necklace",
optionC: "Wristwatch",
optionD: "Chain Braclet",
correctOption: "optionA"
},
{
question: "What manga has Naru canonically read and quoted?",
optionA: "Dragon Ball",
optionB: "Boys Over Flowers.",
optionC: "Sailor Moon",
optionD: "One Piece",
correctOption: "optionD"
},
{
question: "In her 'Made Mood' card which pose is Naru doing with her hands?",
optionA: "Pointing",
optionB: "Finger Heart",
optionC: "Peace sign",
optionD: "Heart hand",
correctOption: "optionD"
},
{
question: "Why was Naru's hair brown in her first year?",
optionA: "She wanted to blend in more",
optionB: "She had a rebellious phase",
optionC: "She dyed it to match her crush",
optionD: "It's her natural hair colour",
correctOption: "optionC"
},
{
question: "What is Naru, above all, committed to?",
optionA: "Self-love",
optionB: "Caring for her friends",
optionC: "Modelling",
optionD: "Romance",
correctOption: "optionA"
},
{
question: "What has Naru said she adores in a person?",
optionA: "Tsundere",
optionB: "Hard-working",
optionC: "Tall and handsome",
optionD: "Brunettes",
correctOption: "optionB"
},
{
question: "Who are Naru's Roommates?",
optionA: "Mama, Sora and Wataru",
optionB: "Shu, Kuroo and Mao",
optionC: "Mika and Hinata",
optionD: "Himeru and Tetora",
correctOption: "optionD"
},
{
question: "What is Naru's current goal?",
optionA: "To have her own brand",
optionB: "To make a new fragrance line",
optionC: "To make her screen acting debut",
optionD: "To move overseas to model",
correctOption: "optionA"
},
{
question: "How tall is Naru?",
optionA: "174cm",
optionB: "171cm",
optionC: "176cm",
optionD: "179cm",
correctOption: "optionC"
},
{
question: "How does Naru refer to most people?",
optionA: "-chan",
optionB: "-kyun",
optionC: "-chin",
optionD: "-shi",
correctOption: "optionA"
},
{
question: "What is Naru's Feature Scout card called?",
optionA: "Elegant Fragrance",
optionB: "Alluring Fragrant Blossom",
optionC: "My Best Self",
optionD: "Dreaming Lady",
correctOption: "optionC"
},
{
question: "Who is Naru's Best Friend?",
optionA: "Kanata Shinkai",
optionB: "Ritsu Sakuma",
optionC: "Izumi Sena",
optionD: "Mika Kagehira",
correctOption: "optionD"
},
{
question: "How many siblings does Naru have?",
optionA: "One",
optionB: "Two",
optionC: "Four",
optionD: "Three",
correctOption: "optionA"
},
{
question: "What is Naru's title in knights?",
optionA: "Duchess",
optionB: "Princess",
optionC: "Big sister",
optionD: "Queen",
correctOption: "optionD"
},
{
question: "Who reminds Naru of 'That Person'?",
optionA: "Akiomi Kunugi",
optionB: "Leo Tsukinaga",
optionC: "Mika Kagehira",
optionD: "Mayoi Ayase",
correctOption: "optionB"
},
{
question: "What is the name of the circle Naru is a part of?",
optionA: "Magical6",
optionB: "Pretty5",
optionC: "Manga Club",
optionD: "CRAFTMONSTER",
correctOption: "optionB"
},
{
question: "Who composed Naru's event song 'Heart Collector'?",
optionA: "Leo Tsukinaga",
optionB: "Herself",
optionC: "Ritsu Sakuma",
optionD: "Izumi Sena",
correctOption: "optionC"
},
{
question: "How many piercings does she have?",
optionA: "Three",
optionB: "Four",
optionC: "Two",
optionD: "Six",
correctOption: "optionA"
}
]
let shuffledQuestions = [] //empty array to hold shuffled selected questions
function handleQuestions() {
//function to shuffle and push 10 questions to shuffledQuestions array
while (shuffledQuestions.length <= 11) { //update this to lenth of questions you want -1 i.e if you want 16 questions then <= 15
const random = questions[Math.floor(Math.random() * questions.length)]
if (!shuffledQuestions.includes(random)) {
shuffledQuestions.push(random)
}
}
}
let questionNumber = 1
let playerScore = 0
let wrongAttempt = 0
let indexNumber = 0
// function for displaying next question in the array to dom
function NextQuestion(index) {
handleQuestions()
const currentQuestion = shuffledQuestions[index]
document.getElementById("question-number").innerHTML = questionNumber
document.getElementById("player-score").innerHTML = playerScore
document.getElementById("display-question").innerHTML = currentQuestion.question;
document.getElementById("option-one-label").innerHTML = currentQuestion.optionA;
document.getElementById("option-two-label").innerHTML = currentQuestion.optionB;
document.getElementById("option-three-label").innerHTML = currentQuestion.optionC;
document.getElementById("option-four-label").innerHTML = currentQuestion.optionD;
}
function checkForAnswer() {
const currentQuestion = shuffledQuestions[indexNumber] //gets current Question
const currentQuestionAnswer = currentQuestion.correctOption //gets current Question's answer
const options = document.getElementsByName("option"); //gets all elements in dom with name of 'option' (in this the radio inputs)
let correctOption = null
options.forEach((option) => {
if (option.value === currentQuestionAnswer) {
//get's correct's radio input with correct answer
correctOption = option.labels[0].id
}
})
//checking to make sure a radio input has been checked or an option being chosen
if (options[0].checked === false && options[1].checked === false && options[2].checked === false && options[3].checked == false) {
document.getElementById('option-modal').style.display = "flex"
}
//checking if checked radio button is same as answer
options.forEach((option) => {
if (option.checked === true && option.value === currentQuestionAnswer) {
document.getElementById(correctOption).style.backgroundColor = "rgb(189, 228, 173)"
playerScore++
indexNumber++
//set to delay question number till when next question loads
setTimeout(() => {
questionNumber++
}, 1000)
}
else if (option.checked && option.value !== currentQuestionAnswer) {
const wrongLabelId = option.labels[0].id
document.getElementById(wrongLabelId).style.backgroundColor = "rgb(247, 150, 150)"
document.getElementById(correctOption).style.backgroundColor = "rgb(189, 228, 173)"
wrongAttempt++
indexNumber++
//set to delay question number till when next question loads
setTimeout(() => {
questionNumber++
}, 1000)
}
})
}
//called when the next button is called
function handleNextQuestion() {
checkForAnswer()
unCheckRadioButtons()
//delays next question displaying for a second
setTimeout(() => {
if (indexNumber <= 11) { //update this to number of questions you want -1. determines when there's no more question and should display answer
NextQuestion(indexNumber)
}
else {
handleEndGame()
}
resetOptionBackground()
}, 1000);
}
//sets options background back to null after display the right/wrong colors
function resetOptionBackground() {
const options = document.getElementsByName("option");
options.forEach((option) => {
document.getElementById(option.labels[0].id).style.backgroundColor = ""
})
}
// unchecking all radio buttons for next question(can be done with map or foreach loop also)
function unCheckRadioButtons() {
const options = document.getElementsByName("option");
for (let i = 0; i < options.length; i++) {
options[i].checked = false;
}
}
// function for when all questions being answered
function handleEndGame() {
let remark = null
let remarkColor = null
// condition check for player remark and remark color
if (playerScore <= 3) {
remark = "Fail"
remarkColor = "rgb(163, 42, 52)"
}
else if (playerScore >= 4 && playerScore < 7) {
remark = "Average Grades, You can do better."
remarkColor = "rgb(255, 187, 174)"
}
else if (playerScore >= 7 && playerScore < 12) {
remark = "Excellent, Keep the good work going."
remarkColor = "rgb(179, 235, 195)"
}
else if (playerScore = 12) {
remark = "100% Amazing!"
remarkColor = "rgb(196, 139, 230)"
}
//playerScore divided by new length of questions
const playerGrade = (playerScore / 12) * 100
//data to display to score board
document.getElementById('remarks').innerHTML = remark
document.getElementById('remarks').style.color = remarkColor
document.getElementById('grade-percentage').innerHTML = playerGrade
document.getElementById('wrong-answers').innerHTML = wrongAttempt
document.getElementById('right-answers').innerHTML = playerScore
document.getElementById('score-modal').style.display = "flex"
}
//closes score modal and resets game
function closeScoreModal() {
questionNumber = 1
playerScore = 0
wrongAttempt = 0
indexNumber = 0
shuffledQuestions = []
NextQuestion(indexNumber)
document.getElementById('score-modal').style.display = "none"
}
//function to close warning modal
function closeOptionModal() {
document.getElementById('option-modal').style.display = "none"
}
For further context I want the html image and text box to display below the “remarks” in this pop-up
[Image of Pop-up showing quiz resuts][1]
[1]: https://i.sstatic.net/UmbQz9fE.png
How to pass data from a WordPress shortcode to a JavaScript function? [closed]
I’m creating a custom shortcode in WordPress that displays a button. When the button is clicked, I want to trigger a JavaScript function and pass some data from PHP to JS.
How can I safely pass the PHP data from the shortcode to the JavaScript file?
Need previous/next arrows within Elementor Tabs Widget to navigate between tabs
Need to make the green left/right arrow buttons open up the prev/next tabs respectively on the Elementor Tabs Widget on this page. https://rsaengineering.wpenginepowered.com/capabilities/
The tab widget has the ID #capabilities-tabs and each tab has a manual ID on it of #tab-1 though #tab-12.
I’ve tried variants of JS snippets like below, but it still doesn’t seem to be working. Can someone please tell me what the issue is?
document.addEventListener('DOMContentLoaded', function () {
const tabsContainer = document.querySelector('#capabilities-tabs');
const tabTitles = tabsContainer.querySelectorAll('.elementor-tab-title');
const nextButton = document.querySelector('.next-tab-button');
nextButton.addEventListener('click', function () {
const activeTab = tabsContainer.querySelector('.elementor-tab-title.elementor-active');
let currentIndex = Array.from(tabTitles).indexOf(activeTab);
let nextIndex = (currentIndex + 1) % tabTitles.length;
// Simulate click on the next tab
tabTitles[nextIndex].click();
});
});
window.addEventListener('load', function() {
const hash = window.location.hash.substring(1); // remove the '#'
if (hash) {
const targetPanel = document.getElementById(hash);
if (targetPanel) {
const targetControl = targetPanel.getAttribute('aria-labelledby');
if (targetControl) {
const tabTitle = document.getElementById(targetControl);
if (tabTitle) {
tabTitle.click();
}
}
}
}
});
etc…
How to get the min/max xaxis values after user zooms in on apexcharts linechart?
I am trying to get the min/max xaxis values after zooming in on a linechart in apexcharts. Is there a specific method for this?
I have been scouring the documentation and haven’t found anything. Can somebody please help?
Trouble Oath Authentification podio
I am having troubles with the Authentikation Token with Script. I have changes the ID of Podio and the APP 3 times, and it doesn’t work.
❌ Error OAuth: 400 – {“error”:”invalid_client”,”error_detail”:”oauth.client.invalid_id”,”error_description”:”Sorry, you’ve supplied an invalid client id.”,”error_parameters”:{},”error_propagate”:true,”request”:{“url”:”http://api.podio.com/oauth/token”,”method”:”POST”,”query_string”:””}}
Información Token OAuth: ❌
Any idea where is my mistake?
I have tried several times with different scripts. I am trying to configurate a Webhook that helps me, that everytime I issue an Invoice in APP2 the VIPS Customers with specific Workspaces with their invoices, get a copy of this invoice in that workspaces, so I don¡t have to copy it manually.
When to use getReader() versus [Symbol.asyncIterator]()
With the current WebAPI’s there seems to be two very similar ways to consume a ReadableStream and I’m curious what are the pros/cons of each and in which use cases I’d use one over the other. I’ve tried searching and AI prompting to no avail.
Say I have a ReadableStream like this:
class MyStream extends ReadableStream {
#count = 0;
constructor() {
super({
pull: (controller) => controller.enqueue(this.#count++),
});
}
}
There are two ways to consume this stream that we commonly see online:
getReader().read()
const reader = new MyStream().getReader();
let done = false;
let value = 0;
try {
while (!done && value < 5) {
({ done, value } = await reader.read());
console.log(value);
}
} finally {
reader.releaseLock();
}
Or for individual chunks:
const reader = new MyReader().getReader();
try {
const { value: firstCount } = await reader.read();
} finally {
reader.releaseLock();
}
for await…of
for await (const count of new MyStream()) {
console.log(count);
if (count >= 5) break;
}
Or for individual chunks:
const iter = new MyReader()[Symbol.asyncIterator]();
try {
const { value: firstCount } = await iter.next();
} finally {
iter.return();
}
Based on these two I’m curious why we have both and when would we use one over the other?
How can I quickly calculate my final grade if I have multiple assignments with different weightages?
I am trying to calculate my final grade for a course where assignments, quizzes, and exams all have different weightages (for example, quizzes 20%, midterm 30%, final exam 50%).
I want to calculate it accurately without manually doing a lot of math or mistakes. I am looking for a reliable way to compute this easily.
I tried doing the calculation manually using a spreadsheet, but it became confusing because of the different weights and scores.
I also found an online tool https://easygradescalculator.com/ that lets you input your scores and weights. It seems to work, but I want to confirm if this is accurate or if there’s a better method or tool that is commonly recommended by developers or educators.
How can I count items from an output html list
I am trying to count the number of items displayed in the following html table output list. By adding this script at the end and displaying the count number, but nothing displays
const count = document.getElementsByClassName("datacells")
console.log(count);<tr>
<td colspan="2">
<table align="center" border="1" cellpadding="3" cellspacing="0" class="zeroBorder" width="100%">
<tr class="headers">
<td width="5%"><strong>Id</strong></td>
<td width="10%"><strong>Risk title</strong></td>
<td width="20%"><b>Description</b></td>
<td width="4%"><strong>Status</strong></td>
</tr>
<output_list object="Risk_x">
<tr>
<td class="datacells" width="2">
<ol_field name="Id" />
</td>
<td width="3">
<ol_field name="Risk_Name_x" />
</td>
<td width="5">
<ol_field name="Risk_Description_x" />
</td>
<td class="datacells" width="3">
<ol_field name="Status_x" />
</td>
</tr>
</output_list>
</table>
</td>
</tr>Display default tab on navigating from any other URL
I am working on a page using javascript.
In that page I have taken a bootstrap tab. Created 4 tabs. I have implemented the feature of redirecting to same tab after user refreshing the same page by using localstorage concept.
But the moment I switched to the out of page 2 and revisits the it is showing the localstorage tab instead of the default 1st tab.
- Redirected to page 2
- Switched to tab 3 (This stores the tab 3 in localstorage)
- Redirected to Page 3
- Clicked on Page 2 again.
- Seeing tab 3 got enabled, instead of default tab 1.
Here I can work only on page 2, I cant modify any other pages like page 4.
How to Optimize JavaScript for Dynamic Question Rendering in a Flask App? [closed]
I’m working on a Flask-based exam portal where I use JavaScript to dynamically render multiple-choice questions fetched from a backend API. The questions are displayed one at a time with “Next”/“Previous” buttons.
The issue is that rendering feels sluggish when there are many questions (e.g., 50+). I’ve tried using async/await to handle API calls, but the UI still lags. How can I optimize this for better performance? Should I use a library like React, or are there vanilla JavaScript techniques to improve rendering speed? I’ve read about debouncing but am unsure how to apply it here.
Razor Jquery select options filter
I am using ASP Razor Page and trying to bind dynamically dropdown list from backend code then filter select option via jQuery, i try below code, everything works fine, but after run edit button and bind drop-down list for two times, for third times the Drop-Down List(HTML Select Tag) doesn’t bind with value, And Filter not work correctly.
var Password ="";
var Province ="";
function EditUser(element1) {
Password = $(element1).closest('div.dropdown-menu').find(".UpdateClassPassword").val();
Province = $(element1).closest('div.dropdown-menu').find(".UpdateClassProvince").val();
}
$("#EditProvince").find("option").filter(function () {
return this.innerHTML == Province;
}).attr("selected", true);
EidtFunc($('#EditProvince').val());
$("#EditCity").find("option").filter(function () {
return this.innerHTML == City;
}).attr("selected", true);
function EidtFunc(State) {
var _Shahrestan = document.getElementById("EditCity");
_Shahrestan.options.length = 0;
if (State != "") {
var arr = State.split(",");
for (i = 0; i < arr.length; i++) {
if (arr[i] != "") {
_Shahrestan.options[_Shahrestan.options.length] = new Option(arr[i], arr[i]);
}
}
}
$('#EditProvinceName').val($('#EditProvince option:selected').text());
}
function EditSwapVale1() {
$('#EditCityName').val($('#EditCity option:selected').text());
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<a href="#" onclick="EditUser(this); return false;" class="dropdown-item">ویرایش</a>
<input type="hidden" name="EditCityName" id="EditCityName" value="" />
<input type="hidden" name="EditProvinceName" id="EditProvinceName" value="" />
<input type="hidden" value="@row[12]" class="UpdateClassProvince" />
<input type="hidden" value="@row[13]" class="UpdateClassCity" />
<select id="EditProvince" name="EditProvince" class="form-select" onchange="EidtFunc(this.value)">
<option value=""></option>
<option value=" ,آذرشهر ,اسکو ,اهر ,بستانآباد ,بناب ,تبریز ,جلفا ,چاراویماق ,سراب ,شبستر ,عجبشیر ,کلیبر ,مراغه ,مرند ,ملکان ,میانه ,ورزقان ,هریس ,هشترود">آذربایجان شرقی</option>
<option value=" ,ارومیه ,اشنویه ,بوکان ,پیرانشهر ,تکاب ,چالدران ,خوی ,سردشت ,سلماس ,شاهیندژ ,ماکو ,مهاباد ,میاندوآب ,نقده">آذربایجان غربی</option>
<option value=" ,اردبیل ,بیلهسوار ,پارسآباد ,خلخال ,کوثر ,گِرمی ,مِشگینشهر ,نَمین ,نیر">اردبیل</option>
<option value=" ,آران و بیدگل ,اردستان ,اصفهان ,برخوار و میمه ,تیران و کرون ,چادگان ,خمینیشهر ,خوانسار ,سمیرم ,شهرضا ,سمیرم سفلی ,فریدن ,فریدونشهر ,فلاورجان ,کاشان ,گلپایگان ,لنجان ,مبارکه ,نائین ,نجفآباد ,نطنز">اصفهان</option>
<option value=" ,آبدانان ,ایلام ,ایوان ,درهشهر ,دهلران ,شیروان و چرداول ,مهران">ایلام</option>
<option value=" ,بوشهر ,تنگستان ,جم ,دشتستان ,دشتی,دیر ,دیلم ,کنگان ,گناوه">بوشهر</option>
<option value=" ,اسلامشهر ,پاکدشت ,تهران ,دماوند ,رباطکریم ,ری ,ساوجبلاغ ,شمیرانات ,شهریار ,فیروزکوه ,کرج ,نظرآباد ,ورامین">تهران</option>
<option value=" ,اردل ,بروجن ,شهرکرد ,فارسان ,کوهرنگ ,لردگان">چهارمحال و بختیاری</option>
<option value=" ,بیرجند ,درمیان ,سرایان ,سربیشه ,فردوس ,قائنات,نهبندان">خراسان جنوبی</option>
<option value=" ,بردسکن ,تایباد ,تربت جام ,تربت حیدریه ,چناران ,خلیلآباد ,خواف ,درگز ,رشتخوار ,سبزوار ,سرخس ,فریمان ,قوچان ,کاشمر ,کلات ,گناباد ,مشهد ,مه ولات ,نیشابور">خراسان رضوی</option>
<option value=" ,اسفراین ,بجنورد ,جاجرم ,شیروان ,فاروج ,مانه و سملقان">خراسان شمالی</option>
<option value=" ,آبادان ,امیدیه ,اندیمشک ,اهواز ,ایذه ,باغملک ,بندر ماهشهر ,بهبهان ,خرمشهر ,دزفول ,دشت آزادگان ,رامشیر ,رامهرمز ,شادگان ,شوش ,شوشتر ,گتوند ,لالی ,مسجد سلیمان,هندیجان ">خوزستان</option>
<option value=" ,ابهر ,ایجرود ,خدابنده ,خرمدره ,زنجان ,طارم ,ماهنشان">زنجان</option>
<option value=" ,دامغان ,سمنان ,شاهرود ,گرمسار ,مهدیشهر">سمنان</option>
<option value=" ,ایرانشهر ,چابهار ,خاش ,دلگان ,زابل ,زاهدان ,زهک ,سراوان ,سرباز ,کنارک ,نیکشهر">سیستان و بلوچستان</option>
<option value=" ,آباده ,ارسنجان ,استهبان ,اقلید ,بوانات ,پاسارگاد ,جهرم ,خرمبید ,خنج ,داراب ,زریندشت ,سپیدان ,شیراز ,فراشبند ,فسا ,فیروزآباد ,قیر و کارزین ,کازرون ,لارستان ,لامِرد ,مرودشت ,ممسنی ,مهر ,نیریز">فارس</option>
<option value=" ,آبیک ,البرز ,بوئینزهرا ,تاکستان ,قزوین">قزوین</option>
<option value=" ,قم">قم</option>
<option value=" ,بانه ,بیجار ,دیواندره ,سروآباد ,سقز ,سنندج ,قروه ,کامیاران ,مریوان">کردستان</option>
<option value=" ,بافت ,بردسیر ,بم ,جیرفت ,راور ,رفسنجان ,رودبار جنوب ,زرند ,سیرجان ,شهر بابک ,عنبرآباد ,قلعه گنج ,کرمان ,کوهبنان ,کهنوج ,منوجان">کرمان</option>
<option value=" ,اسلامآباد غرب ,پاوه ,ثلاث باباجانی ,جوانرود ,دالاهو ,روانسر ,سرپل ذهاب ,سنقر ,صحنه ,قصر شیرین ,کرمانشاه ,کنگاور ,گیلان غرب ,هرسین">کرمانشاه</option>
<option value=" ,بویراحمد ,بهمئی ,دنا ,کهگیلویه ,گچساران">کهگیلویه و بویراحمد</option>
<option value=" ,آزادشهر ,آققلا ,بندر گز ,ترکمن ,رامیان ,علیآباد ,کردکوی ,کلاله ,گرگان ,گنبد کاووس ,مراوهتپه ,مینودشت">گلستان</option>
<option value=" ,آستارا ,آستانه اشرفیه ,اَملَش ,بندر انزلی ,رشت ,رضوانشهر ,رودبار ,رودسر ,سیاهکل ,شَفت ,صومعهسرا ,طوالش ,فومَن ,لاهیجان ,لنگرود ,ماسال">گیلان</option>
<option value=" ,بیرانشهر ,ازنا ,الیگودرز ,بروجرد ,پلدختر ,خرمآباد ,دورود ,دلفان ,سلسله ,کوهدشت">لرستان</option>
<option value=" ,آمل ,بابل ,بابلسر ,بهشهر ,تنکابن ,جویبار ,چالوس ,رامسر ,ساری ,سوادکوه ,قائمشهر ,گلوگاه ,محمودآباد ,نکا ,نور ,نوشهر">مازندران</option>
<option value=" ,آشتیان ,اراک ,تفرش ,خمین ,دلیجان ,زرندیه ,ساوه ,شازند ,کمیجان ,محلات">مرکزی</option>
<option value=" ,ابوموسی ,بستک ,بندر عباس ,بندر لنگه ,جاسک ,حاجیآباد ,شهرستان خمیر ,رودان ,قشم ,گاوبندی ,میناب">هرمزگان</option>
<option value=" ,اسدآباد ,بهار ,تویسرکان ,رزن ,کبودرآهنگ ,ملایر ,نهاوند ,همدان">همدان</option>
<option value=" ,ابرکوه ,اردکان ,بافق ,تفت ,خاتم ,صدوق ,طبس ,مهریز ,مِیبُد ,یزد">یزد</option>
</select>
<select id="EditCity" name="EditCity" class="form-select" onchange="EditSwapVale1()">
</select>Mediapipe Hand Detection using javascript
I want to add the object inside the arm but instead it floating on the arm how do i apply that logic in my code please help me out…i am not able to add that object example like a braclet