Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add configurable word and character limits to questions #272

Merged
merged 9 commits into from Jul 8, 2019

Conversation

petschekr
Copy link
Member

@petschekr petschekr commented Jul 8, 2019

  • Admins can now add maxWordCount, minWordCount, maxCharacterCount, and minCharacterCount to fields that accept text
  • Character counts use HTML5 form validation for better user experience (and won't allow sending of form until it passes)
  • Word counts are represented live to the user as they type
  • Word and character counts are checked server side to prevent sneaky users / crappy browsers from allowing bad inputs
  • Word and character counts are stackable (can configure multiple limits for the same question)

Closes #268

@petschekr petschekr added enhancement Adds or suggests a new feature, rewrite, or other enhancement to the codebase high priority labels Jul 8, 2019
@petschekr petschekr added this to the HackGT 6 Launch milestone Jul 8, 2019
Copy link
Member

@evan10s evan10s left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Didn't test locally but looks pretty good

client/js/application.ts Outdated Show resolved Hide resolved
let wordCountInputs = document.querySelectorAll("[data-max-word-count], [data-min-word-count]") as NodeListOf<HTMLInputElement | HTMLTextAreaElement>;
for (let i = 0; i < wordCountInputs.length; i++) {
wordCountInputs[i].addEventListener("input", e => {
let target = e.target as HTMLInputElement | HTMLTextAreaElement;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

seems like this can be const?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call. I'm too used to Rust at the moment where everything is immutable by default and it also uses let

client/js/application.ts Outdated Show resolved Hide resolved
client/js/application.ts Outdated Show resolved Hide resolved
client/js/application.ts Outdated Show resolved Hide resolved
{{#ifCond this.type "textarea"}}
<textarea name="{{this.name}}" id="form-{{this.name}}" placeholder="{{this.placeholder}}" {{required this.required}}>{{this.value}}</textarea>
<textarea name="{{this.name}}" id="form-{{this.name}}" placeholder="{{this.placeholder}}" {{required this.required}} minlength="{{this.minCharacterCount}}" maxlength="{{this.maxCharacterCount}}" data-max-word-count="{{this.maxWordCount}}" data-min-word-count="{{this.minWordCount}}">{{this.value}}</textarea>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this still add the minlength and other attributes even if those aren't defined in the JSON file?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah it does
Is it worth adding a Handlebars partial to only add the attribute if it is set?

@@ -45,7 +60,7 @@
<input type="file" name="{{this.name}}" id="form-{{this.name}}" placeholder="{{this.placeholder}}" {{required this.required}} />
{{/if}}
{{else}}
<input type="{{this.type}}" name="{{this.name}}" id="form-{{this.name}}" placeholder="{{this.placeholder}}" {{required this.required}} value="{{this.value}}" />
<input type="{{this.type}}" name="{{this.name}}" id="form-{{this.name}}" placeholder="{{this.placeholder}}" {{required this.required}} minlength="{{this.minCharacterCount}}" maxlength="{{this.maxCharacterCount}}" data-max-word-count="{{this.maxWordCount}}" data-min-word-count="{{this.minWordCount}}" value="{{this.value}}" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here re: attrs

server/routes/api/user.ts Outdated Show resolved Hide resolved
server/routes/api/user.ts Outdated Show resolved Hide resolved
@ehsanmasdar ehsanmasdar self-requested a review July 8, 2019 05:31
@petschekr petschekr merged commit bd8a647 into master Jul 8, 2019
@petschekr petschekr deleted the word-limit branch January 30, 2020 04:59
rahulrajus pushed a commit that referenced this pull request Jul 22, 2021
Add configurable word and character limits to questions
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Adds or suggests a new feature, rewrite, or other enhancement to the codebase high priority
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Max word count
3 participants