Showing message on completion of puzzle

JavaScript
1

I have a crossword puzzle made in html, css and javascript as well as a bonus puzzle and when the user completes both puzzles, I want a congrats screen to appear. I have made this congrats screen, so I want to know how to make this screen appear after user completes both puzzles

1 Like
2

Hi @jackson108, how is that success page going to be loaded in the first place? Is the quiz session and evaluation supposed to happen on the server side, or is this more of a J4F project with client side logic only? Either way we’d need to see the code to reproduce your setup – ideally as a SSCCE (that is without expecting some DB connection or the like), or a codepen if there is no BE logic involved.

3

I have both screens in a codepen, how do I attach them to send to you?

4

Simply paste the codepen link in your post.

1 Like
5

This is the crossword puzzle with the clue screen and my congrats screen. I need help to merge the two screens so that when the user finishes the puzzle and clue the congrats message will automatically appear

As of now, you are correct or incorrect appears, but I would like just the congrats screen to appear.
Thanks for your help
Angela Jackson

6

Are you talking about a modal screen that sits over the crossword or do you simply want to re-direct to a new page?

In the JS where you announce the correct solution you could instead redirect to the new page or if you want to stay on the same page you could launch a modal to open containing your new message. (Of course you would then need to re-initialise the crossword if they are going to try again.)

I can’t help with the JS but can show you how to put your message html in a modal if that’s what you were looking for.?

7

Just automatically redirect to the congrats page when user finishes puzzle instead of ,You are correct/incorrect
Thanks, Angela Jackson

8

I’m sure you can work that out for yourself :).

Find the part of your code where you would usually display your message and instead redirect to your new page.

window.location.href = 'URL';

Where URL would be the address of your new page.

9

Just be aware that the codePen use of frames means that the technique won’t work well there. When the page is running elsewhere there should be no troubles.

1 Like
10

A post was split to a new topic: Clickable button on coloured background

11

This is the css:
#result {
margin-left:10px;
font-size: 16px;
font-weight: bold;
font-family: Arial;
color: red;
text-transform: uppercase;

This is where I tried to redirect to the success page when puzzle was right, as in post 8, leaving the message Try Again, but it doesn’t work, it just goes to the success page no matter if right or wrong. Can you tell me how to correct?
}
document.querySelector( “#result”).innerHTML = (

values.join(“”) === “stars”? “:x: TRY AGAIN!!” : window.location.href=‘Success.html’

);

12

Try moving the logic out out of the assignment, so that you figure out the information first, and only after you have all of the information, you do the assignment.

13

For example: assign the comparison to a local value:

const isSuccessful = values.join("") === “stars”;
document.querySelector( “#result”).innerHTML = (
    isSuccessful ? “:x: TRY AGAIN!!” : window.location.href=‘Success.html’

And then, check if the success condition has occurred.

const isSuccessful = values.join("") === “stars”;
if (isSuccessful) {
    window.location.href=‘Success.html’
}
document.querySelector( “#result”).innerHTML = “:x: TRY AGAIN!!”;

And lastly, we can move the isSuccessful code out to a separate function, and rename it so that it makes better sense.

function hasFinished(values) {
    return values.join("") === “stars”;
}
if (hasFinished(values)) {
    window.location.href=‘Success.html’
}
document.querySelector( “#result”).innerHTML = “:x: TRY AGAIN!!”;

The code is a lot easier to understand now, and it’s easier to talk about the code, and to try and understand what it’s supposed to do.

1 Like
14

Can you put the code in post 13 in a codepen?
Thanks
Angela Jackson

15

No thank you, I don’t see how that would be helpful.

16

Ok. Thanks

17

Well how can you put the message in a html models in Post 6?
Thanks

18

There are plenty of tutorials for modals so probably better if you work your way through one or two and see how they work and if they do what you want.

https://www.cssscript.com/minimal-modal-box-vanilla-javascript/

2 Likes
19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.