disable restarting a quiz in javascript and html - javascript

i'm looking for a way to disable a start button on a quiz after its clicked and still be disabled if the user were to refresh the browser.
its quite a large script and everything I try seems to either disable the button without an input or do nothing.

You can create a cookie in the browser when the start button is clicked, and then check for that cookie, If the cookie exists set that button as disabled. even if the page is reloaded that cookie will be there and the start button will be disabled until the cookie is destroyed. You can create a cookie in js like this and set its expiry according to the requirement:
document.cookie = "username= your_username; expires=Thu, 18 Dec 2022 12:00:00 UTC";

You can try using localStorage to store persistent data, and then retrieve it when the page loads
const key = 'your_key_here';
const isDisabled = !!+localStorage.getItem(key);
document.getElementById('btn').disabled = isDisabled;
function handleClick (e) {
localStorage.setItem(key, 1)
}
<button id="btn" onClick="handleClick" />
Be aware that it will stay indefinitely in localStorage until you clear it

Try to keep a flag in cookie or session/local storage.
For instance, if you click the button on start of quiz, add click event listener to the button and inside of it push a variable in the cookie or session/local storage. You can then check for this variable in your script whenever your page loads. If the variable is present, disable the button using JavaScript else let it be enabled.
But be sure to check the difference between session storage and local storage before using them. They both have different use cases and will depend on what you need.

Related

Popup newsletter form opens every time when reload the page

I want to add a automatic popup newsletter form to my static website(usinng google spreadsheet to collect mail). But when page reload every time popup shows up. I want something like if anyone press Subscribe or Not Now button popup will stop forever for their device. Is it possible?
I used this code. But When I reopen the browser Newsletter popup shows again.What I need to change here?
$(document).ready(function () {
if ($.cookie("dismiss") == null) {
$('.modal').appendTo("body");
function show_modal() {
$('.modal').modal();
}
window.setTimeout(show_modal, 300);
}
$(".close").mouseenter(function () {
document.cookie = "dismiss=true";
});
});
Thanks in advance.
You can tackle this using local storage. MDN Documentation
With local storage you can save information that is not lost after a refresh. (Similar thing can be done with cookies, but in this particular case I think local storage fits your use case)
So you can try doing something like this:
// save item
localStorage.setItem("isUserSubscribed", true);
// get item
localStorage.getItem("isUserSubscribed");
Note that local storage items that are not set will return a null value.
In short every time the page loads execute getItem() and based on that value run the logic that you need.

The enabled button is getting disabled after redirecting to other page and coming back to the previous page

I have disabled a button by default. When user checks a checkbox then the button is getting enabled. But in the same page we have some links to redirect to other pages. If we click on any link the new page is getting opened and then if we come back to the same page the button which was enabled is getting disabled though the checkbox is checked. How can i keep the button state enabled after redirect?
Please find the code for the page:
function() {
var $checkbox = this.$checkbox[0]
if $checkbox.checked {
this.$button.prop("disabled", false);
}
else {
this.$button.prop("disabled", true)
}
}
The nature of Javascript variables is to live within the life of a page view. If you change between documents, the variable states get lost. So you could just consider leveraging the local storage.
localStorage.setItem('myCat', 'Misu');
Please read the docs in details, I think this could be the base of what you're looking for.
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

How to use SessionStorage for a chrome extension

I am making a Google Chrome Extension and i'm having an issue figuring out how to use the sessionStorage ability:
https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
This is the Code i have from the link above:
/* Session Storage */
sessionStorage.setItem('inputtextB', 'inputtext');
// Get the text field that we're going to track
var field = document.getElementById("field");
// See if we have an autosave value
// (this will only happen if the page is accidentally refreshed)
if (sessionStorage.getItem("autosave")) {
// Restore the contents of the text field
field.value = sessionStorage.getItem("autosave");
}
// Listen for changes in the text field
field.addEventListener("change", function() {
// And save the results into the session storage object
sessionStorage.setItem("autosave", field.value);
});
"inputtext" is the textarea i want to save. I just want its current state to be remembered. As i understand this will make a copy of "inputtext" every time it changes and save it to "inputtextB", then if the pages reloads (But not closes) It will replace "inputtext" with "inputtextB".
my confusion is that i do not know how to make this work, I've been working with this all day and can't figure it out. I dont want this to persist if chrome shuts down only if i open/close the popup, or i reload the current page.
I have looked over a few things and these are close but i don't know if these are exactly what i want to happen.
HTML5 sessionStorage or chrome.storage for Chrome Extension? I think this might be the closest?
Chrome Extensions - Saving Settings
Chrome Extension: How to persist data in popup across popup clicks
I hope i can get a little help to figure out the best way to do this.
Edit:
What happens is you enter text Then you press a button and it parses it for use in HTML.
Example of how this works:
( Hi, how are you? ) and it outputs-
(<span style="color: #008080;">Hi</span><span style="color: #006400;">,</span><span style="color: #008080;"> how are you</span><span style="color: #006400;">?</span> )
When using Inspect popup this shows:
https://i.gyazo.com/9effdfac3e8b38ba7aa3908189ec50a4.png
since i added the above code whenever i press the button to parse this shows:
https://i.gyazo.com/7264a620eb6019302909e12675343870.png

How can I hide a button after it was clicked?

I have a stop button,when it is clicked it gets hidden but when I fresh the page the button does appear again.Is it possible to hide the button forever even if there is a page refresh here is what I tried
newContent += Hesto.Html.CreateTD('<input type="button" value="Stop" id="btnStopEvent">');
function GetEventId() {
$(document).on('click', '#btnStopEvent', function () {
var EventId = $(this).parents('tr').attr('id');
var Result = {
EventId: EventId
};
$(this).hide();
});
}
You'll have to persist the button's state somewhere else. Every time you reload the page, your code is re-loaded and any JavaScript variables that were set are initialized again.
You could do something with Local Storage, there are many tools that make using Local Storage easy, here is a very simple example:
// set the value and save it in local storage
localStorage.setItem( "stop_button_state", "disabled" );
// after page re-load, fetch the saved value
var button_state = localStorage.getItem( "stop_button_state" )
You could also use some sort of server side persistance, it could be a session variable (PHP) or even stored in a database of some sorts. You would then retrieve the setting before serving the page to the user.
Cookies might be good for this case. You already use jQuery, so try this plugin
https://github.com/carhartl/jquery-cookie
After that you need to write some simple logic to set cookie when button is clicked and check for cookie before clicking so that it wont show.
Localstorage is also good as someone already mentioned, if you aim only for moden browsers.
http://www.w3schools.com/html/html5_webstorage.asp

Javascript - Reload page after form submit with target="_blank"

I'm trying to achive the following:
On page A we have an access restricted Link to page B. The access restriction is handled on the server side in PHP.
When a user clicks on this link to page B we display a modal dialogue on page A (via javascript) with a form, having the link's href (B) as the action. (To give the user an immediate feedback. The fallback is to redirect him to a login form that redirects him to the site he wants to access.)
This system works quite well.
But now comes my question:
We have access restricted links that should be opened in a new window.
Now if I use target="_blank" on the form the user stays logged out on the page he came from (A), that is still open in the background.
Is there a way to reload the page (A, in the background) right after the form has been submitted to the new window (B)?
My first idea was to use window.location.reload(); in the submit handler on page A.
This didn't work in chrome and from what I understand could create a race condition.
Another idea would be to log the user in via an ajax call and open a new window through javascript. Is there a way to do this without having to deal with pop-up blockers?
I implemented the idea of lostsource (see below) with one slight addition.
As I need to reload only once, the timer of setInterval can be stopped if the cookie changed.
var ri=setInterval(function() {
if(oldCookie != document.cookie) {
// assuming a login happened, reload page
clearInterval(ri);
window.location.reload();
}
},1000); // check every second
I still love the idea. stackoverflow is awsome!
Assuming you're storing PHP session information inside a cookie, you might be able to monitor your document.cookie for changes.
Before submitting the form store the value of the current cookie and monitor it for changes with a timer:
form.onsubmit = function() {
var oldCookie = document.cookie;
var cookiePoll = setInterval(function() {
if(oldCookie != document.cookie) {
// stop polling
clearInterval(cookiePoll);
// assuming a login happened, reload page
window.location.reload();
}
},1000); // check every second
}
On the parent page, do you have any visual/functional changes because of the login? As in any new actions possible?
If not, then you dont have to do anything as you would be checking for login on every action from the parent page, you can check for permissions along with that.
If there are changes or additional functionalities, you can call a javascript function in the parent, say reloadMe, using window.opener.reloadMe()
Why not just a simple setTimeout
setTimeout(function(){ location.reload(); }, 1000);
It is a bit hacky, but seems appropriate for your situation.

Categories