We Keep Coding

Crate a canvas & JS game based on Mario but using prompts

I am working on a project where a figurine is jumping, and at the moment of the jump on a platform, it will stop.
platforms.forEach((platform) => {
if (
player.position.y + player.height <= platform.position.y &&
player.position.y + player.height + player.velocity.y >=
platform.position.y &&
player.position.x + player.width >= platform.position.x &&
player.position.x <= platform.position.x + platform.width
) {
player.velocity.y = 0;
}
});
To define different platforms, I used an array.
My question is, how can I make a pop-up window with a message when a player. velocity.y = 0;
And after it happens, the window will close, and the movement starts again
Also, the first two elements of the array should be excluded because they create the running platform.
This is the code I try to use, but after the window is open, it will open again and again.
{
let guess = Number(
window.prompt(
"Please solve the problem: " + randomNumber1 + "+" + randomNumber2
)
);
if (guess != sum) {
let randomNumber1 = Math.floor(Math.random() * 10 + 1);
let randomNumber2 = Math.floor(Math.random() * 10 + 1);
let sum = randomNumber1 + randomNumber2;
alert("Try again!");
let guess = Number(
window.prompt(
"Please solve the problem: " + randomNumber1 + "+" + randomNumber2
)
);
} else {
alert("Good Job!!");
}
}

How to create a loop that asks a new random addition question after answering the previous question

I am working on creating a small 5 question addition quiz that asks the user a new random addition question every time they answer the previous one. I would like to be able to have my script ask a new question every time the user clicks on the "check answer" button without having to refresh the page. Then, once the user has completed the 5 questions, I would like to be able to have a popup state they have completed the quiz and can refresh the page to start a new quiz. With my current code, the script asks a random addition question, and then once the user clicks on the "check answer" button, the user must refresh the page to get a new question. I am stuck on figuring out how to modify my current code to fit what I am trying to do. I am thinking that a while loop may be they way to go, but I don't really know how to implement it. The code that I have so far is: `
<h1>Addition Quiz!</h1>
<p>This short 5 question quiz will test your addition skills! Answer the question as the computer asks it and pat yourself on the back for each correct answer!</p>
<h3 id="mathquestion"></h3>
<input type="text" name="answerbox" id="answerbox">
<button onclick="addition()">Check Answer</button>
<script>
var minimum = 1;
var maximum = 9;
var intiger1 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
var intiger2 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
document.getElementById("mathquestion").innerHTML = intiger1 + " " + "+" + " " + intiger2;
var questionanswer = intiger1 + intiger2;
function addition() {
var useranswer = document.getElementById('answerbox').value;
if (useranswer == questionanswer) {
alert("Correct! Congrats!");
} else {
alert("Sorry, your answer is incorrect. Better luck with the next question!")
}
}
</script>`

So what you want is the part that setups your question into a new function. And run that function when the answer is right. An example:
<script>
var minimum = 1;
var maximum = 9;
var questionanswer = 0;
setupQuestion();
function setupQuestion(){
var intiger1 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
var intiger2 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
document.getElementById("mathquestion").innerHTML = intiger1 + " " + "+" + " " + intiger2;
questionanswer = intiger1 + intiger2;
}
function addition() {
var useranswer = document.getElementById('answerbox').value;
if (useranswer == questionanswer) {
alert("Correct! Congrats!");
setupQuestion();
} else {
alert("Sorry, your answer is incorrect. Better luck with the next question!")
}
}
</script>`

Just update the variable
<script>
var minimum = 1;
var maximum = 9;
var intiger1 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
var intiger2 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
document.getElementById("mathquestion").innerHTML = intiger1 + " " + "+" + " " + intiger2;
var questionanswer = intiger1 + intiger2;
function addition() {
var useranswer = document.getElementById('answerbox').value;
if (useranswer == questionanswer) {
alert("Correct! Congrats!");
} else {
alert("Sorry, your answer is incorrect. Better luck with the next question!")
}
// Updating question
intiger1 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
intiger2 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
document.getElementById("mathquestion").innerHTML = intiger1 + " " + "+" + " " + intiger2;
}
</script>

.append not working on click

Simple button that should be creating new <p> elements when its clicked but it isn't working and I'm not sure why as I've compared it to other code of mine.
Demo
var battle = function() {
while(monsterHP > 0){
var playerDam = Math.floor(Math.random() * ((playerAtk - monsterAtk) + 2);
$('#battle').append("<p>You have hit the monster for " + playerDam + " damage. The monster has " + (monsterHP - playerDam) + "HP left</p>");
monsterHP -= playerDam;
if(monsterHP <= 0) {
$('#battle').append("<p>You have defeated the monster</p>");
}
}
}
$('#battleButton').click(function() {
battle();
}

You have many syntax errors in your code. If you correct them (as below), then it works fine. When you write a JQuery append, you need to put a ')' after your argument. Likewise, functions need to have a '}' after them.
var playerAtk = 5;
var playerDef = 5;
var playerHP = 10;
var monsterAtk = 4;
var monsterDef = 4;
var monsterHP = 8;
var battle = function() {
while(monsterHP > 0){
var playerDam = Math.floor(Math.random() * ((playerAtk - monsterAtk) + 2));
$('#battle').append("<p>You have hit the monster for " + playerDam + " damage. The monster has " + (monsterHP - playerDam) + "HP left</p>");
monsterHP -= playerDam;
if(monsterHP <= 0) {
$('#battle').append("<p>You have defeated the monster</p>");
}
}
}
$('#battleButton').click(function() {
battle();
});

Single jQuery function to manipulate elements with the same ".class" independently

I want to duplicate the "voting-bar-container" div that carries jQuery functionality with it. However, because each duplicate carries with it the same ".classes" (and my jQuery Selectors target those classes), the jQuery is executed on each duplicate regardless of which "voting-bar-container" div is being interacted with.
I want the jQuery events to be executed ONLY on the elements being interacted with.
I believe the answer lies in my choice of Selectors as I know I don't need to duplicate my jQuery code for each duplicate HTML element with different "ID's".
https://jsfiddle.net/STEEZENS/aqd87b2d/
OR
Here is my HTML & jQuery:
<div class="voting-bar-container">
<button class="upvote">
<span class="upvote-counter">0</span>
</button>
<div class="vote-meter">
<div class="upvotes"></div>
<div class="downvotes"></div>
</div>
<button class="downvote">
<span class="downvote-counter">0</span>
</button>
</div>
jQuery:
$(document).ready(function () {
var $downvoteCount = 0;
var $upvoteCount = 0;
$(".upvote").click(function () {
$upvoteCount++;
$(".upvote-counter").text(" " + $upvoteCount);
var $totalVoteCount = $upvoteCount + $downvoteCount;
var $upvoteProportion = Math.round(($upvoteCount / $totalVoteCount) * 100);
var $downvoteProportion = Math.round(($downvoteCount / $totalVoteCount) * 100);
if (($upvoteProportion + $downvoteProportion) > 100) {
$(".upvotes").width(($upvoteProportion - 0.5) + "%");
$(".downvotes").width(($downvoteProportion - 0.5) + "%");
} else {
$(".upvotes").width($upvoteProportion + "%");
$(".downvotes").width($downvoteProportion + "%");
}
});
$(".downvote").click(function () {
$downvoteCount++;
$(".downvote-counter").text(" " + $downvoteCount);
var $totalVoteCount = $upvoteCount + $downvoteCount;
var $upvoteProportion = Math.round(($upvoteCount / $totalVoteCount) * 100);
var $downvoteProportion = Math.round(($downvoteCount / $totalVoteCount) * 100);
if (($upvoteProportion + $downvoteProportion) > 100) {
$(".upvotes").width(($upvoteProportion - 0.5) + "%");
$(".downvotes").width(($downvoteProportion - 0.5) + "%");
} else {
$(".upvotes").width($upvoteProportion + "%");
$(".downvotes").width($downvoteProportion + "%");
}
});
});

you need to use $(this)
$(this).find(".upvote-counter")
instead of
$(".upvote-counter")
while you asked for (*What I want is for the jQuery events to be executed ONLY on the elements being interacted with) .. your code should be something like this .. you will need to use .closest() as well >> to get the downvote div related with the upvote div and reverse
$(document).ready(function () {
var $downvoteCount = 0;
var $upvoteCount = 0;
$(".upvote").click(function () {
$upvoteCount++;
$(this).find(".upvote-counter").text(" " + $upvoteCount);
var $totalVoteCount = $upvoteCount + $downvoteCount;
var $upvoteProportion = Math.round(($upvoteCount / $totalVoteCount) * 100);
var $downvoteProportion = Math.round(($downvoteCount / $totalVoteCount) * 100);
if (($upvoteProportion + $downvoteProportion) > 100) {
$(this).width(($upvoteProportion - 0.5) + "%");
$(this).closest('voting-bar-container').find(".downvotes").width(($downvoteProportion - 0.5) + "%");
} else {
$(this).width($upvoteProportion + "%");
$(this).closest('voting-bar-container').width($downvoteProportion + "%");
}
});
$(".downvote").click(function () {
$downvoteCount++;
$(this).find(".downvote-counter").text(" " + $downvoteCount);
var $totalVoteCount = $upvoteCount + $downvoteCount;
var $upvoteProportion = Math.round(($upvoteCount / $totalVoteCount) * 100);
var $downvoteProportion = Math.round(($downvoteCount / $totalVoteCount) * 100);
if (($upvoteProportion + $downvoteProportion) > 100) {
$(this).closest('voting-bar-container').find(".upvotes").width(($upvoteProportion - 0.5) + "%");
$(this).width(($downvoteProportion - 0.5) + "%");
} else {
$(this).closest('voting-bar-container').find(".upvotes").width($upvoteProportion + "%");
$(this).width($downvoteProportion + "%");
}
});
});
DEMO
Note: this answer upon to your request .. you will need to work on it a little bit to reach a style you want

You need to be traversing the DOM to find the elements in question relative to the element that was clicked, instead of globally.
First, as you have multiple elements that have upvotes associated with them, the value of this and it's iteration needs to occur based on the existing upvote value of the element that is closest to upvote. Please observe below:
$(".upvote").click(function () {
var upvote_counter = $(this).find('span'),
downvote_counter = $(this).parent().find('.downvote-counter'),
upvotes = $(this).parent().find('.upvotes'),
downvotes = $(this).parent().find('.downvotes'),
$upvoteCount = upvote_counter.text(),
$downvoteCount = downvote_counter.text();
$upvoteCount++;
upvote_counter.text($upvoteCount);
var $totalVoteCount = $upvoteCount + $downvoteCount;
var $upvoteProportion = Math.round(($upvoteCount / $totalVoteCount) * 100);
var $downvoteProportion = Math.round(($downvoteCount / $totalVoteCount) * 100);
if (($upvoteProportion + $downvoteProportion) > 100) {
upvotes.width(($upvoteProportion - 0.5) + "%");
downvotes..width(($downvoteProportion - 0.5) + "%");
} else {
upvotes.width($upvoteProportion + "%");
downvotes.width($downvoteProportion + "%");
}
});
This will allow you to properly select the elements that are closest associated with the upvote element that is clicked. Do something similar for the downvote function.

looking for a way to simplify this if/else statement. javascript

So, I have a function (i am workng with jquery ui and running this on drag event, though for this question I don't think that is important)
Basically I have the following repetitive if else code:
And I am curious if there is a way to write this in one line(ish) and not have a 100 else if lines if I want to be able to support 100 steps (divisions of a total slider value).
var thisPos = $( ".sliderknob" ).position();
var x = thisPos.left - window['sliderhome'].left;
console.log("(" + x + ")");
l = Object.keys(obj_frameindex).length;
framefraction = 290/l;
if (x>-1 && x<framefraction){
console.log('frame 1');
frameselector(0);
$('#framecounter').html("FRAME " + 1);
}
else if (x>framefraction && x<framefraction*2){
console.log('frame 2');
frameselector(1);
$('#framecounter').html("FRAME " + 2);
}
else if (x>framefraction*2 && x<framefraction*3){
console.log('frame 3');
frameselector(2);
$('#framecounter').html("FRAME " + 3);
}
else if (x>framefraction*3 && x<framefraction*4){
console.log('frame 4');
frameselector(3);
$('#framecounter').html("FRAME " + 4);} //etc..........
Showing only 4 here, but imagine it goes on...
Any ideas?

One possible approach:
var frameNo = Math.max(0, Math.floor(x / framefraction)) + 1;
console.log('frame ' + frameNo);
frameselector(frameNo - 1);
$('#framecounter').html('FRAME ' + frameNo);

Do something like:
if x < 0 { return };
var f = Math.ceil(x / framefraction);
console.log(`frame` + f);
frameselector(f - 1);
$(`#framecounter`).html("FRAME " + f);