Authoring Tool - Requirement step

[ecureuill]

:warning: Wire-frames and live-demos are just for example purpose. They doesn'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. Error Identification

6. Wire frames

Live-demo(source)

• [x] Separate information and structure from presentation (use css files, do not style inline)

• [x] Responsive design

• [x] Page title: "Course Requirements"

  • component: h2

User input

• SoftwareRequirements
  • list title: "Software Requirement"
  • component: list widget checkbox list with subheads -subhead: "Utility", options: -LibreOffice -MSOffice -subhead: "Operational System", options: -WindowsOS -LinuxOS -MacOS -AndroidOS -iOS -subhead: "Development Environment", options: -TextEditor (Atom, SublimeText, Notepad++, TextMate) -OnlineEditor (CodePen, JSFiddle, Koding, PhythonFiddle) -VisualStudio -Eclipse -RapidPHPEditor -NetBeans -MacRabbitEspresso -Cloud9 -BootstrapFramework -ExpressionStudioFramework -AzureFramework -Github -BitBucket -Axure -subhead: "Data Science" options: -DataStudio (https://www.dataiku.com/) -R -MATLAB -Spreadsheet -Tableau -Jupyter -subhead: "Graphic Design" options: -GIMP -Inkscape -Photoshop
  • AddSoftware
  • CancelAddSoftware
  • SaveAddSoftware
  • EditSoftware
  • CancelEditSoftware
  • SaveEditSoftware
  • DeleteSoftware
• HardwareRequirements
  • component: list widget checkbox list.
  • list title: "Hardware Requirement" -option:
    • Smartphone
    • Tablet
    • SmartWatch
    • PenTable
    • ScientificCalculator
    • FinancialCalculator
    • GraphingCalculator
    • DigitalCamera
    • DSLRCamera
    • 3DPrint
    • DSLRCamera
    • VRHeadset
    • MRHeadset
    • SonyPSVR
    • OculusRift
    • 360Camera
    • WebCam
  • AddHardware
  • CancelAddHardware
  • SaveAddHardware
  • EditHardware
  • CancelEditHardware
  • SaveEditHardware
  • DeleteHardware

Usability

• [x] meet #50
• [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

- [ ] Do not allow add an Hardware that already exist in the list of pre-existent hardwwares

• [x] Do not allow add an Hardware that already exist in the list of custom Hardwares added by user

- [ ] Do not allow add an Softwares that already exist in the list of pre-existent Softwares

• [x] Do not allow add an Softwares that already exist in the list of custom Softwares added by user

Error Prevention

• [x] OpenHardware: do not allow user add an empty option (button do not enabled before user enter a value)
• [x] OpenSoftware: do not allow user add an empty option (button do not enabled before user enter a value)

If user tries to delete an OpenHardware or OpenSoftware, system should ask for confirmation

• [x] Use a alertdialog #51
• title: Deleting [hardware|software]
• message: You requested to delete [CONTENT]. Do you want to proceed?
  • No
  • Yes (emphasis)

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-labelledby
Hardware	n/a	Hardware prerequisites
AddHardware	Add other hardware	n/a
SaveAddHardware	[icon]	Save hardware inclusion
CancelAddHardware	[icon]	Cancel hardware inclusion
EditHardware	[icon]	Edit hardware
SaveEditHardware	[icon]	Save hardware edition
CancelEditHardware	[icon]	Cancel hardware edition
DeleteHardware	[icon]	Delete hardware
Software	n/a	Software prerequisites
AddSoftware	Add other software	n/a
SaveAddSoftware	[icon]	Save software inclusion
CancelAddSoftware	[icon]	Cancel software inclusion
EditSoftware	[icon]	Edit software
SaveEditSoftware	[icon]	Save software edition
CancelEditSoftware	[icon]	Cancel software edition
DeleteSoftware	[icon]	Delete software

Instructions

• inline instructions is the tip in AccessibilityHelp component. In other words, the brief instruction right above the input field.
• Placeholder is a example inside 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	Placeholder	Tooltip
Hardware	Select hardwares that are mandatory to take this couse. You can also add others hardwares not listed above, by selecting [AddHardware] button	n/a	n/a
AddHardware	Add other hardware	n/a	n/a
SaveAddHardware	n/a	n/a	Save hardware inclusion
CancelAddHardware	n/a	n/a	Cancel hardware inclusion
EditHardware	n/a	n/a	Edit hardware
SaveEditHardware	n/a	n/a	Save hardware edition
CancelEditHardware	n/a	n/a	Cancel hardware edition
DeleteHardware	n/a	n/a	Delete hardware
Software	Select softwares that are mandatory to take this couse. You can also add others softwares not listed above, by selecting [AddSoftware] button	n/a	n/a
AddSoftware	Add other software	n/a
SaveAddSoftware	n/a	n/a	Save software inclusion
CancelAddSoftware	n/a	n/a	Cancel software inclusion
EditSoftware	n/a	n/a	Edit software
SaveEditSoftware	n/a	n/a	Save software edition
CancelEditSoftware	n/a	n/a	Cancel software edition
DeleteSoftware	n/a	n/a	Delete software

Help button ("More details")

N/A

Error Identification and Suggestion

• [x] errors feedback

field	Validation	Error message
all	Required	[Field_Name] is required. Please complete it
OpenHardware	Unique	You already add [CONTENT] before.
OpenSoftware	Unique	You already add [CONTENT] before.

Wire-frames

[ecureuill]

only open option for requirements

[github-actions[bot]]

This Feature is ready to be implemented.

[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.

---

• [x] When user tries to delete a Hardware requirement there should be a modal (according to issue https://github.com/solex2006/SELIProject/issues/51), instead of the browser window

---

• [x] There's no responsiveness

---

• [x] When user writes in a software requirement, changes the step page, and goes back to the Requirements page, the requirement is copied to hardware requirements

• [x] The same thing happens when user writes in a hardware requirement, changes the step page, and goes back to the Requirements page, the requirement is copied to software requirements

---

• [x] Examples (WebCam and MSOffice) could be in a “Help button” (following issue https://github.com/solex2006/SELIProject/issues/46), instead of as an actual requirement that the user has to delete.

[caroltaus]

• [x] There should be a space between "Software" and "requirements"

---

• [x] This information icon/text for the software and hardware requirements are unnecessary and can be deleted

---

• [x] Not all added requirements are saved For example, this is what happens when user adds 5 software requirements, goes back to a previous step, and comes back to the Requirement Step:

When user adds the requirements:

When user comes back to the page:

[rebeccamello]

• [x] Course requirement deleting modal has the wrong title. It should be "Deleting requirement". Modal defining issue: (https://github.com/solex2006/SELIProject/issues/51)

---

• [x] The software requirement is not being deleted:

Steps to reproduce:

• Add one software requirement and one hardware requirement
• Delete the hardware requirement
• Try to delete the software requirement (doesn't work)
• Change to another step and go back to the Requirements step
• Delete the software requirement (works)

[ecureuill]

• [x] Should not present an error feedback before user perform one. I just click the button "Add other software" and the field is already presented with an error feedback.

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

  • BETTER SOLUTION Keep SAVE button disabled while value is empty (=== ""); OR
  • On SAVE, check for empty empty (=== "") and if true present the Required Validation error message

• [x] The Unique Validation should not validate against the value of the current field.

  1. Add a item with value 1 and save
  2. Select to edit the item
  3. Make no modifications and try to save

---

Alert dialog is not working properly An alertdialog divert users' attention to a brief, important message and can receive a response from user. Ensuring that, while the alertdialog is shown, keyboard and mouse interactions only operate within the dialog.

• [x] Dialog is closing when user click outside dialog

:bulb: Suggestion: create one component for each #51 specs and reutilize it through project. This way avoid a lot of maintenance and guarantee the consistence in entire project

[github-actions[bot]]

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

[github-actions[bot]]

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