Implement the full quiz functionality without requiring any JavaScript to run. #6
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This commit makes several minor changes that perform the following:
* Wraps all interface text with i18n functions.
* Include a Text Domain for the WordPress header to prepare for l10n.
* Replace the constant used as the text domain with a string literal.
* This is a WordPres plugin developer's best practice. See:
https://developer.wordpress.org/plugins/internationalization/how-to-internationalize-your-plugin/
* Wrap all printed strings with appropriate output escaping functions.
* Explicit denote the plugin's GPL-3.0 license in a PHP DocBlock.
This commit will not require a user to answer a non-existent quiz on a post that does not have an associated quiz to answer. This prevents the frustrating scenario where a post has no questions to answer so it can't ever be answered correctly.
This commit correctly implements the quiz checking for users who have JavaScript disabled. Therefore, it also removes the "Please enable JavaScript" message, as JavaScript is no longer needed to view or answer the quiz questions. If a user does not answer the quiz correctly, the comment is not posted. Instead, the user is redirected back to the original comment form with their comment content intact and is told to try the quiz again. This implementation simply uses query string parameters for this to avoid additional load on the database or storing any persistent data. The `rawurlencode()` and `rawurldecode()` along with the `esc_html()` functions are carefully used to avoid reflected XSS attacks. Additionally, more pieces of the codebase have been modified to use the WP coding style. See https://make.wordpress.org/core/handbook/best-practices/coding-standards/php/ for more information on the PHP coding style guidelines.
This commit makes it possible to add an arbitrary number of quiz questions to a post's quiz form without the need for JavaScript on the admin side. This is done by padding the quiz array however many questions are in the current quiz, plus one. The JavaScript button used to add another question is hidden if JavaScript is not available, since that button does nothing in that case. Also, slightly more semantic HTML is used. The `<br/>` elements have been removed. The questions are now marked up using `<p>` and `<li>`s. The commit also extracts the PHP and HTML from the JavaScript into its own function. The code is also restyled to match the WP coding style.
fabacab
force-pushed
the
no-js
branch
5 times, most recently
from
8bc9976 to
3f76395
Compare
With this commit, the JavaScript component now renders itself inside a `FORM` element, rather than outside. This begins addressing the issues listed in nrkbeta#1, and means that both JavaScript and non-JavaScript variations work; the JavaScript now creates inputs as the WordPress back-end expects them. Further, this commit also fixes the error animation, and changes the animation for when the user enters the quiz answers correctly. Previously, this component hid the comment form and revealed it when the quiz was answered, but this required rendering the quiz outside the form. With the above change, the animation has been changed to disabling the comment form's textareas and re-enabling them when the quiz is answered correctly, along with showing a bolded green success message.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I absolutely love the idea of this plugin! That said, while I am admittedly not the typical end-user, I dislike needing JavaScript to access basic functionality on a website, and I usually surf the Web with JavaScript completely disabled.
To that end, I have implemented your quiz functionality in its entirety for a reader of a WordPress blog using your plugin who does not have JavaScript enabled. All features work, including randomized positions of the quiz answers, displaying the "Try again" message, remembering prior quiz answers (using an HTTP-only cookie that checks a SHA-256 hash of the serialized quiz data), and retaining comment content across page loads.
I have also obsessively filtered all string output through WordPress's
esc_*functions and added PHP DocBlocks, which was mostly for my own benefit as I was familiarizing myself with your plugin.The same has been done for blog authors, so that the admin-side portion of this plugin does not require JavaScript to function. Previously, JavaScript is needed to add more than one question to a post's quiz.
Finally, prior to this PR, while the comment form was hidden from human users who were browsing with CSS enabled, it was still possible to post comments without actually answering the comment quiz. The comment form was also shown, and active, to visitors using text-only or console-based browsers. These users (or, more likely, spam bots) could simply ignore the comment quiz, since their answers were never checked. With this pull request, the server actually verifies that a user has answered all questions in the quiz correctly, and does not process the comment further if any answer is wrong.
Thanks for offering this wonderful plugin idea.