Authoring Tool - Information step

[ecureuill]

:warning: Wire-frames and live-demos are just for example purpose. They don't meet entirely this requirement.

:pencil2: Pencil icon marks specs that are waiting for definition

---

Index

1. User Input
2. Usability
3. Validations
4. Error Prevention
5. Feedback
   1. Labels
   2. Instructions
   3. Help button
   4. Guided Help button
   5. Error Identification

6. Wire frames

Live-demo(source)

General

• [x] Separate information and structure from presentation (use css files, do not style inline)
• [x] Responsive design
• [x] meet #49
• [x] meet #50

User input

• [x] Create form fields and components
• CourseTitle (required)
• CourseSubtitle (required)
• CourseDescription (required)
• CourseLanguage (required)
• CourseKeywords (required)
• CourseDuration (required)
  • default value: 001:00:00
• CourseImage (required)
  • [x] meet Upload buttons section #49

Usability

• [x] Single-column layout
• [x] Match fields to the type and size of the input.
• [x] Replace * for "'(required)". It could be achieved by css.
  • [x] Alternatively, include a statement in the beginning of the page that "*" is used for required fields

Validations

• [x] Required Validation: Check whether a required field is filled
• [x] Keyword Format Validation: Check whether the keyword has the expected input format
  • each keyword will be separated by a comma
  • no special character should be allowed.
  • ex: "virtual reality, post-modern, simulation"
• [x] Keyword Range Validation: Check if whether there are the minimum (3) and maximum (5) allowed keywords
• [x] Image Validation: Check whether the image has the expected size and type
• [x] Valid Time Validation: Check whether the duration (in hours) has a valid time (format)
• [x] Duration Validation: Check whether the duration is in the expected range :exclamation:
  • minimum > 0

Error prevention

• [x] Duration: configure the input field to accept only
  • numbers
  • (hours) format: mask "999:99:99"

Feedback

• [x] #46 Use the AccessibilityHelp component
  • inline instructions
  • help
  • error messages

Labels

If the used component do not have a native visible label, use aria-label or aria-labelledby

• [x] Labels

field	visible label	aria-label or aria-describedby
CourseTitle	Title	n/a
CourseSubtitle	Subtitle	n/a
CourseDescription	Description	n/a
CourseLanguage	Language	n/a
CourseKeywords	Keywords	n/a
CourseDuration	Duration in hours	n/a
CourseImage	Upload the course image	n/a

Instructions

• inline instructions is the tip in AccessibilityHelp component. In other words, the brief instruction right above the input field.

• Tooltip is a popup that shows on focus and hover.

  • It will host the Label of the component, when the component doesn't have a visible label.
  • It will host the brief description of the required input, when the component doesn't have a inline description

• [x] Instructions

field	Inline Instruction	Tooltip
CourseTitle	Inform the course title, e.g. "Computer Science"	n/a
CourseSubtitle	Inform the course subtitle, e.g "Programming with a Purpose"	n/a
CourseDescription	Inform a brief description of the course	n/a
CourseLanguage	Select the language in which your course is held	n/a
CourseKeywords	Inform at least [min] keywords and no more then [max] keywords that represent the course and skills that student will acquired . A keyword should not have special characters [special characters example]	n/a
CourseDuration	Estimated course duration. [any format rule]	n/a
CourseImage	[Any information required to select the correct file] #49	n/a

Help button ("More details")

• 150

Guided Help Button (“help me decide”)

N/A

Error Identification and Suggestion

• [x] Error feedback

field	Validation	Error message
all	Required	[Field_Name] is required. Please complete it
Keyword	Format	[CONTENT] has a invalid entry. Please inform a keyword that is [RULE]
Keyword	Range	Inform at least 3 keywords and no more then 5 keywords.
Image	Type	Seems that you select a invalid image. Course's image should [RULE].
Duration	Range (Hours)	Course duration has a invalid entry. Expected duration in hours should be greater than 0.
Duration	Format (Hours)	Course duration has a invalid entry. Please, inform a value with a time format 000:00:00

Wire-frames

[github-actions[bot]]

This Feature is ready to be implemented.

[ecureuill]

@juantenesaca it's ready. You can now follow the Development Cycle flow.

[caroltaus]

• [x] It shouldn't be possible to include the same keyword more than once

---

• [x] It is possible to include keyword with special characters if user copy and paste them into the form

---

• [x] Help button should not be centralized, it should be aligned to the left (according to issue https://github.com/solex2006/SELIProject/issues/46)

---

• [x] It should be just "(required)" instead of "(required)*", according to the usability section of this issue

[caroltaus]

• [x] Previous Step button should be disabled when user is at the first step

---

• [x] Stepper considers the step completed when user adds at least one keyword (it should only consider it completed when there is at least 3 keywords)

---

• [x] It is possible to publish the course without no language selected all step finished. Checks #72 and #45 for Publish rules

• [x] Minutes and seconds field should only be able to go up to 59

[ecureuill]

• [x] Inserted keywords is not left aligned (#50)

[caroltaus]

• [x] It's possible to add an empty keyword (value = " ")

[ecureuill]

@juantenesaca @CAndresH

• [x] #183 You can solve this now or later. But as it can cause the loss of course creation progress, I think is better to fix it asap

[github-actions[bot]]

Functional Test failed! Please, review your solution.

[ecureuill]

• [x] localization issue on keyword input #195

[ecureuill]

Please, move to CODED only when this feature is fully implemented: bugs reported in comments and requirements in OP If you want that we test some partial solution, add a comment here with our @

[juantenesaca]

@ecureuill Last meeting, the maximum number of keywords were changed to 10.

[ecureuill]

@juantenesaca all the requests of changes/enhancements in the current specification or new features I'm inserting in GitHub as "Feature Request" this means you shouldn't work on it already. This requests will be handled when we finish the current milestone (Instructional Design) and next milestone (Accessibility Requirements), otherwise you will never finish these milestones.

About this specific case, I opened #213 for increasing number of keywords. If you already coded that let me know, and I settled it as done.

[juantenesaca]

@ecureuill Yes, I already have changed this feature.

This issue was on Failed list that is why I have developed now. In few minutes I am going to commit on mode it to CODED list.

[github-actions[bot]]

This feature have been implemented and is ready for Funcional Test. Please, test the feature.

[github-actions[bot]]

Functional Test failed! Please, review your solution.

---

Please, move to CODED only when this feature is fully implemented

• bugs reported in comments are fixed
• requirements in OP are coded If you want to request a test of some partial solution, add a comment here with test team @

---

There are still tasks that need to be done.

[juantenesaca]

@rebeccamello please, specify the error.

[github-actions[bot]]

This feature have been implemented and is ready for Funcional Test. Please, test the feature.

[github-actions[bot]]

Functional Test failed! Please, review your solution.

---

Please, move to CODED only when this feature is fully implemented

• bugs reported in comments are fixed
• requirements in OP are coded If you want to request a test of some partial solution, add a comment here with test team @

---

Hi @juantenesaca, sure!

• [x] The fields of duration time and course image are showing "(required)*", instead of just "(required)"

---

• [x] It is possible to include keyword with special characters if user copy and paste them into the form

---

• [x] Stepper considers the step completed when user adds at least one keyword (it should only consider it completed when there is at least 3 keywords)

---

• [x] Minutes and seconds field should only be able to go up to 59

---

• [x] It's possible to add an empty keyword (value = " ")

[github-actions[bot]]

This feature have been implemented and is ready for Funcional Test. Please, test the feature.

[rebeccamello]

Hi!

Everything is working great! i just have a suggestion: if the user adds a special character, there could be a snackbar showing the error.

[juantenesaca]

@rebeccamello It was done as you suggested. Thanks for the hard work.

[github-actions[bot]]

Functional Test passed! Please, make a PULL REQUEST or, if already merged, close the issue.