Develop Reference

When the users are on the same webpage, is it possible that one user has clicked on a button and that will notify all other users?

Just like the title says. I want to create a shared online timer for my friends and say when one of my friends clicked the "refresh timer" button, ideally that all my other friends' page should get automatically refreshed with the new timer, or a notification saying that the timer has refreshed and require them to refresh the page.
I think at least the latter one is possible since when you get a comment of your question on Stackoverflow, you will get notified somewhere in the page telling you there's a new comment.
How to achieve this functionality? In JS or? Thanks in advance!

Javascript setInterval
using Javascript setInterval when the page is loaded, if you're not using MySQL, check a notepad for the text update(or whatever you want) and when it's found, clear it and then run whatever code
When the user presses a button, have it write to the file update(the same thing as above)

There would be 2 ways to go about it:
Simpler one would be to use polling through setInterval and look for changes on the backend.
A more accurate way would be to use Websockets which relay information to the clients that the timer has been reset.
Your choice of tool would depend on how complex you're willing to let it be

How to stop triggering introjs after first walkthrough?

I'm using introjs.
But when a user ends the intro, then refreshes the page, introjs starts up again.
Is there a way to only show a walkthrough once per user?
For example I have it where when a user first signs into my website - introjs will popup. I only want it to pop up for that initial welcome.
Potential Solutions
Maybe there is a way to trigger introjs via the create action like one would with a flash message?
I could replicate all my header, sidebar, and challenges section code into pages/tutorial.html.erb and make a route www.websitename.com/tutorial, but then that would be a lot of code to duplicate and then whenever I change something in the site I would have to change it in tutorial too.
Is there a way to adjust this javascript method in application.js to trigger only once per user $(function () {
introJs().start() })?
I just use data-intro="" for each step of the walkthrough.

You want your application/webpage to remember that the user has already gone through your tutorial.
There are a few ways you can do that. For a start, you can use cookies or localStorage
The gist is that after the user finishes, or otherwise exits your tutorial, you can store a descriptive value to the user's client, by using one of the above methods, and on page load you should first check if this value exists and act accordingly.
EDIT: As mentioned in comments, you will need a server side approach as well.

defaultChecked; why this property even exist?

Taking JavaScript this semester. I cannot grasp how this property can be useful at all. This property gives a Boolean value of true IF the checked attribute was used in tag for the check box object...BUT if I am the one writing the program ...I should know if I wrote that into the program correct? I just do not see the logic in this property. Anybody have a better reason for the use of it?

First, to answer your question, "Don't I know?". Of course not. If you are thinking of a form that is only used to add records, I could see your point but forms are also used to update records and we have no idea what the initial value is for any given record that may need to be updated.
The next thing to understand is that the same concept applies to more than check boxes. For example the text input elements have a "defaultValue" property that parallels the logic of default checked property.
The next point, is these properties would be better understood by novices had they been named "initialxyz" rather than "defaultxyz". Novices think that they are used to identify what should be sent to the server if not populated by the user but that is not what they are at all. They are the initial value, as sent by the server to the client, before the user starts interacting with the screen.
To answer your larger question, these propertied are extremely useful in two cases. The first has already been mentioned which is the "reset" button or as I jokingly call it the "oops" button or "start over". That can occur at the record level that resets every element on the form but it can be used on a field by field basis where only the field that has focus is reset. For example, the escape key is often used for this purpose. The second use for this is to know if the form is "clean" (unchanged) or dirty (changed, in at least one small way somewhere). This is used in too commentary places that you did not think about. The first is to avoid submitting a form with no changes to the server. Why waste resources. The complementary is to pop up the "are you sure you want to lose your changes" when someone attempts to navigate away from a form with changes. You walk the form and compare the current valued to the initial value for each element. If no elements changed the form is clean and allow the user to leave without a prompt. If at least one element is different than it's initial value and take appropriate action which might be to prompt to confirm leaving or it might be to submit the form changes to the server before leaving or something that neither of us have thought of yet.

Hypothetically, you might have a form with lots of fields written in html, and you may want to have a "reset" button which resets all of the form fields back to their initial values. (I don't really know why that used to be a common form button, I've never seen a use for it...) The code to reset checkboxes would then be:
input.checked = input.defaultChecked;
which would be the same for all checkboxes, and then you wouldn't need to track the difference between default checked and no default checked ones separately.
Really though, it doesn't appear to have much use, and I've never used it before.

One scenario would be when you are creating checkboxes dynamically, on-the-fly, in your code. The creation may be dependent on a couple of parameters, some of them depending in turn on selections by the user, from the current screen/page.
You may wish to set what is the state of these newly created checkboxes by default, before the user performs any actions on them.
Exemplifying: Say you have a textbox where the user has to tell you how many new checkboxes you should create for whatever further actions. Then after the user enters the input, your javascript creates N checkboxes, accordingly. And their initial state is set according to "defaultChecked".

Just yesterday I found myself using this same attribute. It comes in very handy when trying to set certain values to default.
Have you ever signed up for something ad then found yourself receiving TONS of unwanted newsletters? or you install one thing and two more things start installing? This happens because there was an option somewhere with a checkbox that had the checked attribute to make that decision for you.
Mostly it is used to make decisions for the user. Comes in handy sooner than later!
BTW: Welcome to the sweet world of JavaScript!

How do I efficiently write a "toggle database value" function in AJAX?

Say I have a website which shows the user ten images and asks them to categorise each image by clicking on buttons. A button for "funny", a button for "scary", a button for "pretty" and so on. These buttons aren't exclusive. A picture can be both funny and scary.
The user clicks the "funny" button. An AJAX request is sent off to the database to mark that image as funny. The "funny" button lights up, by assigning a class in the DOM to mark it as "on".
But the user made a mistake. They meant to hit the next button over. They should click "funny" again to turn it off, right?
At this point I'm not sure whats the most efficient way to proceed.
The database knows that the "funny" flag is set, but it's inefficient to query the database every time a button is clicked to say, is this flag set or not, then go on with a second database call to toggle it.
Should I infer the state of the database flag from the DOM, i.e. if that button has the class "on" then the flag must be set, and branch at that point?
Or would it be better to have a data structure in Javascript in the page which duplicates the state of each image in the database, so that every time I set the database flag to true, I also set the value in the Javascript data to true and so on?

I would keep the state of the element in the js on the page and just issue state-change requests via Ajax. On the server side it is reasonable to either process directly or introduce a state validation check.
This depends on various aspects of your system architecture, however. If the rating is shared between users or other similar scenarios you may need to enforce the round-trip to check what the current status is (or if you have additive nominal flags)...

The page state should be plenty. After all, the page state is what the user sees and manipulates; and they expect the result of their manipulations to reflect what they see.

Score system based on time in Javascript

I have used a jQuery script in order to have a countdown script on a php page that I am doing, but I would also like to have a score system in it based on the time the user takes to answer some questions.
I am using some drag and drops and click in a certain link into an image map -which is the only correct link in the webpage- and in the three pages I am using this countdown, but I would like to, once the user has completed the drags&drops or clicked the links, get the number on the countdown just when the user clicked on a "submit" button...but I am not even sure if I can do this.
Alternatively, could I use any countdown script that would let me get the actual number that is being showed just when the user click on the submit button?
Thanks a lot everybody in advance!

Only use the javascript countdown for display purposes, you cannot trust the client.
Keep the count down server side. Store it in the SESSION variable, or in the database.
Javascript is insecure because the client can change it. I could save your page on my machine, open it up, and modify how the timer reports and you'd get a completely different time than you should get. I could also just change the variable using the browsers address bar. The client can always, always change anything in javascript, and you must, absolutely must rely on the server to keep your users honest.

Why not just stash the time (as a numeric value) when you want the timer to start, and then just check the difference when you want to know how long it's been? In other words, you've already got the client computer's clock counting, because that's what clocks do. Just remember what time it was when the drag&drop completes (or whatever point in time serves as your reference), and then check the time again in an event handler for the submit button.