PHP Ajax on php Website

[Alma_99]

Hello,

I have several webpages on each there is a test with multiple choice questions. As nothing changes on the page except the questions, we decided to use Ajax to render the questions on the page. The problem is that the users can’t smoothly go through the questions to the end, i.e. there is always a short delay (sometimes longer/sometimes even interruption) when users try to go forward from one question to the next.



I believe there should be a better way to avoid this inconvenience. Is it possible, for example, to let ajax load the upcoming questions in background as users start the test, so there is no need to connect to the server for each question!? My purpose is to reach a better user experience or to increase the effectivity.



Thank you

 

[Mutiny]

If the list of questions is always the same, you can just load the questions in the DOM as hidden elements, then show the next question with Javascript rather than using AJAX. The initial page load is a little longer, but no delay when switching questions.

If the next question depends on the answer to the previous question, that's a bit more tricky. You could have an answer and then a "submit" button and start loading the next question when the user clicks an answer, but you may need to reload the question if the user changes their answer.

You could also add some sort of loading animation so that the change doesn't appear laggy to users. This might be the best solution as users shouldn't have a problem as long as they know something is happening.

 

[Alma_99]

Thank you

 

[Ghost]

I agree with @Alma_99 - Your best bet is to either construct new DOM elements or have them already created (but hidden) to show as the quiz progresses. This way AJAX can save answers in the background without interrupting the user experience. I also highly recommend loading screens in between pages any time there is a delay. One thing I do in my AJAX is $("#save-button-here").hide(); so that they do not click the save button multiple times.

A typical Ghost tangent about what to do if AJAX comes back with an error:

One thing to note... If an error is detected (answers not saved for a technical reason), you have a few choices. You could A) inform the user and have them try again (go back in quiz) or B) come up with an alternate method to save and try those. I am just curious - how do you plan to handle things if your controller fails to save?

Email data to an authorized user who can save to database later
For example, let's say the answers are all formatted correctly (in regards to the data format) but they can't save to the database. That could mean there is an issue with the DB (probably temporary), so a backup plan would be to save those answers somewhere else. Well, perhaps that is a text file being written to - the problem? Well, what if the system can't write (disk space full could prevent DB saves & file writes)? In that case, perhaps an instructor / site owner receives an email with the student's anwers and quiz score. This is not really ideal because a production environment should have better infrastructure, BUT when it comes to quizzes it can be a good idea to have absolute fallbacks....

Save locally in browser to save answers later
to take this one step further... If the DB can't save, a file can't be written to, and outgoing email isn't working, what's next? There are a few options - You could submit the answers via a GET or POST request to a separate server... Probably overkill though, right? You could store the answers in the user's browser temporarily (or until they clear cookies/data) and then attempt to retrieve those the next time they visit the site. In fact, this is the essence of "offline browsing" for apps that will actually store data locally in the client's browser or device so that they can continue to see content even if they lose internet, or in this case - continue to take the quiz even without internet, or without the site being able to save. Of course, this is not a great solution for a time limited quiz, but it IS another fallback option. My point is this - you can have multiple fallbacks to save data.