Authoring Tool - Design 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. Features
   1. Tasks
   2. Reources
3. Usability
4. Validations
5. Error Prevention
6. Feedback
   1. Labels
   2. Instructions
   3. Help button
   4. Guided Help button
   5. Error Identification

7. Wire frames

Live-demo(source)

General

• [x] Separate information and structure from presentation (use css files, do not style inline)
• [x] Responsive design
• [x] Page title: "Analysis Phase"
  • component: h2

User input

if CoursePlan[StructureCourse] == StructureCourseUnit

• [x] add fields and components
• Unit: list widget
  • Actions
  • AddUnit
  • EditUnit
  • DeleteUnit
  • Confirm
  • Cancel
  • Move
  • LearningObjectives: input text multiline
  • PreKnowladges: input text multiline
    • [x] optional
  • MainContent: input text multiline
  • Evaluation: input text multiline
  • Resources: checkbox widget
    • [x] optional
  • Lessons: list widget
    • Actions
    • AddLessons
    • EditLessons
    • DeleteLessons
    • Confirm
    • Cancel
    • Move
    • Tasks: table widget
    • [x] optional

if CoursePlan[StructureCourse] == StructureCourseTopic

• [x] add fields and components
• Topic: list widget
  • Actions
  • AddTopic
  • EditTopic
  • DeleteTopic
  • Confirm
  • Cancel
  • Move
  • LearningObjectives: input text multiline
  • PreKnowladges: input text multiline
    • [x] optional
  • MainContent: input text multiline
  • Evaluation: input text multiline
  • Resources: checkbox widget
    • [x] optional
  • Tasks: table widget
    • [x] optional

if CoursePlan[TemplateCourse] != TemplateCourseWithout

• [x] add fields and components
• Topic: list widget
  • Actions
  • AddTopic
  • EditTopic
  • DeleteTopic
  • Confirm
  • Cancel
  • Move
  • LearningObjectives: input text multiline
  • PreKnowladges: input text multiline
  • [x] optional
  • MainContent: input text multiline
  • Evaluation: input text multiline
  • Resources: checkbox widget
    • [x] optional
  • Tasks: table widget
    • [x] Resources: checkbox widget
    • [x] optional

Features

Tasks

• [x] Table columns
  • title: input text
  • type: input select
    • option: TasksActivity, TasksQuiz, TasksProblem, TasksForum
  • graded: input check
  • peerReview: input check
  • group: input type number, default value = 0
  • project: input check
  • [ ] Table actions
  • EditButtonTable
  • DeleteButtonTble
  • ConfirmButtonTable
  • CancelButtonTable
  • MoveButtonTable

if CoursePlan[TemplateCourse] != TemplateCourseSpiral

• [x] type options is limited to: TasksActivity, TasksQuiz, TasksProblem

if CoursePlan[TemplateCourse] != TemplateCourseConsistent

• [x] type options is limited to: TasksActivity and TasksQuiz

if CoursePlan[TemplateCourse] == TemplateCourseWithout

• [ ] type options is limited to: TasksActivity, TasksQuiz, TasksForum, TasksProblem

(This part is better explained in https://github.com/solex2006/SELIProject/issues/142#issuecomment-716059454 )

if CoursePlan[TemplateCourse] != TemplateCourseWithout

• [ ] System provides the option to add resources for each tasks

Resources

• [x] Options (checkbox list)
  • ResourcesAudios
  • ResourcesGames
  • ResourcesImages
  • ResourcesPresentation
  • ResourcesSuplemantaryMaterial
  • ResourcesVideos

if user check the option ResourcesSuplemantaryMaterial

• [x] System will provide a table widget where user can add items of SuplemantaryMaterial type.
• [x] Table columns
  • TitleClumnTable: input text
  • typeClumnTable: input select
    • option: paper, book, other
  • versionClumnTable: input select
    • option: printed, digital
  • externalClumnTable: input check
  • externalURLClumnTable: input text type url
  • externalRefClumnTable: input text
• [ ] Table actions
  • AddButtonTable
  • EditButtonTable
  • DeleteButtonTble
  • ConfirmButtonTable
  • CancelButtonTable
  • SearchTable
  • MoveButtonTable

If versionClumnTable==printed || typeClumnTable==other

• [x] external is disabled
• [x] default value externalClumnTable=true
• [x] externalRefClumnTable is required

If externalClumnTable==true && versionClumnTable==printed

• [x] externalURLClumnTable is required
• [x] externalRefClumnTable is required

If externalClumnTable==true

• [x] externalURLClumnTable is required

If externalClumnTable==false

• [x] externalURLClumnTable is disabled
• [x] default value externalURLClumnTable=''
• [x] externalRefClumnTable is disabled
• [ ] default value externalRefClumnTable=''

if user check the option ResourcesPresentation

• [x] System will provide a table widget where user can add items of Presentation type.
• [x] Table columns
  • TitleClumnTable: input text
  • typeClumnTable: input select
    • option: file, h5p, other
  • externalClumnTable: input check
  • externalURLClumnTable: input text type url
• [ ] Table actions
  • AddButtonTable
  • EditButtonTable
  • DeleteButtonTble
  • ConfirmButtonTable
  • CancelButtonTable
  • SearchTable
  • MoveButtonTable

If typeClumnTable==other

• [x] externalClumnTable is disabled
• [x] default value externalClumnTable=true

If typeClumnTable==h5p

• [x] externalClumnTable is disabled
• [x] default value externalClumnTable=false

If externalClumnTable==true

• [ ] externalURLClumnTable is required

If externalClumnTable==false

• [x] externalURLClumnTable is disabled
• [x] default value externalURLClumnTable=''

if user check the option ResourcesGame

• [x] System will provide a table widget where user can add items of Game type.
• [x] Table columns
  • TitleClumnTable: input text
  • typeClumnTable: input select
    • option: unity, h5p, other
  • externalClumnTable: input check
  • externalURLClumnTable: input text type url
• [ ] Table actions
  • AddButtonTable
  • EditButtonTable
  • DeleteButtonTble
  • ConfirmButtonTable
  • CancelButtonTable
  • SearchTable
  • MoveButtonTable

If typeClumnTable==other

• [x] externalClumnTable is disabled
• [ ] default value externalClumnTable=true

If typeClumnTable==h5p || type==unity

• [x] externalClumnTable is disabled
• [x] default value externalClumnTable=false

If externalClumnTable==true

• [ ] externalURLClumnTable is required

If externalClumnTable==false

• [x] externalURLClumnTable is disabled
• [x] default value externalURLClumnTable=''

re-Sorting

• [ ] Items (rows) in Tasks, ResourcesSuplemantaryMaterial, ResourcesGame and ResourcesPresentation can be reordered source Line 230
• [x] Units, Lessons and Topics can be reorderd source line 338

  Usability

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

Validations

• [ ] Required Validation: Check whether a required field is filled

• [x] Unique Validation - Units: Check whether a Unit's Title is already in use

• [x] Unique Validation - Lesson: Check whether a Lesson's Title is already in use (in current context)

• [x] Unique Validation - Topic: Check whether a Topic' Title is already in use

• [x] Unique Validation - Tasks: Check whether a Tasks's Title is already in use (in current context)

• [ ] if CoursePlan[StructureCourse] == StructureCourseUnit user needs to add at least one unit with one lesson

• [x] if CoursePlan[StructureCourse] == StructureCourseTopic user needs to add at least one topic

• [ ] if CoursePlan[TemplateCourse] != TemplateCourseSpiral user needs to add at least one topic with one task

• [ ] if CoursePlan[TemplateCourse] != TemplateCourseConsistent user needs to add at least one topic with one task

• [ ] if CoursePlan[TemplateCourse] != TemplateCourseToyBox user needs to add at least one topic with one task of type problem

Error Prevention

• [x] On adding and editing, disable confirm button while Unit title is empty
• [x] On adding and editing, disable confirm button while Lesson title is empty
• [x] On adding and editing, disable confirm button while Topic title is empty

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-

• [x] Labels

field	visible label	aria-label or aria-labelledby
LearningObjectives	Learning objectives	n/a
PreKnowledge	Pre-existing knowledges	n/a
MainContent	Main content	n/a
Evaluation	Evaluation	n/a
Resources	Resources	n/a
ResourcesAudios	Audios	n/a
ResourcesGames	Games	n/a
ResourcesImages	Images	n/a
ResourcesPresentation	Presentations	n/a
ResourcesSuplemantaryMaterial	Supplementary Materials	n/a
ResourcesVideos	Videos	n/a
SuplemantaryMaterial	Supplementary Materials List	n/a
paper	Paper	n/a
book	Book	n/a
printed	Printed	n/a
digital	Digital	n/a
Presentation	Presentation List	n/a
file	File (ie: pdf, ppt )	n/a
h5p	H5P	n/a
Game	Game List	n/a
unity	Unity	n/a
Tasks	Tasks List	n/a
TasksActivity	Activity	n/a
TasksQuiz	Quiz	n/a
TasksProblem	Problem	n/a
TasksForum	Forum	n/a
peerReview	Peer Review	n/a
graded	Graded	n/a
group	In Group	n/a
project	Part of course's project	n/a
other	Other	n/a
AddButtonTable	Add item	n/a
EditButtonTable	[icon]	Edit
DeleteButtonTble	[icon]	Delete
ConfirmButtonTable	[icon]	Confirm
CancelButtonTable	[icon]	Cancel
MoveButtonTable	[icon]	Move up
SearchTable	[icon]	Search
TitleClumnTable	Title	n/a
typeClumnTable	Type	n/a
versionClumnTable	Media	n/a
externalClumnTable	External Media	n/a
externalURLClumnTable	Media's URL	n/a
externalRefClumnTable	Reference	n/a
AddTopic	Add Topic	n/a
EditTopic	Edit Topic	n/a
DeleteTopic	Delete Topic	n/a
AddLesson	Add Lesson	n/a
EditLesson	Edit Lesson	n/a
DeleteLesson	Delete Lesson	n/a
AddUnit	Add Unit	n/a
EditUnit	Edit Unit	n/a
DeleteUnit	Delete Unit	n/a
Confirm[icon]	Confirm
Cancel[icon]	Cancel
Move[icon]	Move up

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	Tooltip
LearningObjectives	Add Learning Objectives that shows what the students will know learning in this [unit/topic]	n/a
PreKnowledge	Previous necessary knnowledge to understand this [unit/topic]	n/a
MainContent	Subjects to be addressed	n/a
Evaluation	Mechanisms and criteria to assess whether the learning objectives have been achieved	n/a
Resources	Fundamental or complementary materials, communication services or features used during learning and to support tasks	n/a
Presentation	SELI platform supports main type of presentation files (e.g, .ppt, .pdf) and H5P presentations. You can also add reference to other types of presentations.	n/a
SuplemantaryMaterial	You can list books, papers and others supplementary texts	n/a
Games	Lis the Games that are going to be used in this [unnit/topic]. SELI platform supports Unity and H5P games. You can also add reference to other types of game.	n/a
Tasks	Action to be taken by the student to achieve the learning objectives	n/a

Help button ("More details")

• 150

Guided Help button (“help me decide”)

• 150

Error Identification and Suggestion

• [x] Error feedback

field	Validation	Error message
all	Required	[Field_Name] is required. Please complete it
all	Unique	You already add [CONTENT] before.
Unit	Required	You need to add at least one unit
Lesson	Required	You need to add at least one lesson
Topic	Required	You need to add at least one topic
Problem	Required	You need to add at least one task of type problem
--	--	--

Wire-frames

By Unit

initial

adding / edit unit

unit form

lesson form

By Topic and Template

topic form

Resources

Tasks

Unit/Lesson and Topic context

Template context

Spiral Mode

Consistent Metaphor

Toy Box

[github-actions[bot]]

This Feature is ready to be implemented.

[caroltaus]

• [x] Website crashes when user tries to add 2 lessons

---

• [x] System does not save the type if user does not change the default

"Unity" is the default value:

After user adds the item the type is blank:

---

• [ ] It shouldn't be possible to save a H5P type with the externalClumnTable=true

Steps to reproduce: 1 - put "other" for the type and check the externalClumnTable box 2- change type to "h5p", the externalClumnTable box will be disabled but checked true

[caroltaus]

• [x] System does not save the "copy version" if user does not change the default

"Printed" is the default value:

After user adds the supplementary text the type is blank:

[ecureuill]

• [ ] Must not have a default topic "New Topic", Design step should start with no topic

---

Validations

• [ ] Design step is settled as complete when user completes the required fields of a topic/unit but then erase it.

[caroltaus]

• [x] It's possible to add an empty title (value = " ") for supplementary texts and for tasks

[ecureuill]

• [x] Resources must be optional

[github-actions[bot]]

Functional Test failed! Please, review your solution.

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

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

---

There are tasks in the requirement that are not done

---

• [x] Pre-existing knowledge is not required and should not have a "*"

---

• [ ] Standardize required fields as "(Required)" instead of "(required) " or "(Required) "

---

• [x] Buttons for editing/deleting topics should be "Edit topic name" and "Delete topic"

---

• [x] button to move topics is not working

---

• [ ] There are no MoveButtonTable in any of the tables

---

• [x] There should be an ExternalRef column in Suplementary Material table, like described in the requirement

---

• [x] For presentation and supplementary material resources: When user checks External Resource TRUE, and writes something in the External URL, and then checks External Resource FALSE, it is possible to save an External URL (when externalClumnTable==false, the default value should be externalURLClumnTable=' ')

saved with checkbox == false:

---

• [x] The information about Resources in Unit&Lessons course plan should be the same that is in Topics

In topics:

In Unit&Lessons (has to be changed):

---

• [x] Information for games is incomplete. Should be "List the Games that are going to be used in this [unit/topic]. SELI platform supports Unity and H5P games. You can also add reference to other types of game."

What is on the plataform right now:

[CAndresH]

@caroltaus and @rebeccamello , there is a button to move the rows in the table, We cannot add more buttons that do this function since the table is a library with predefined functions

[caroltaus]

@CAndresH Please don't check the checkboxes, it's easier for us to keep track and know which tasks we have to test when we check them.

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

---

There are tasks in the requirement and in comments https://github.com/solex2006/SELIProject/issues/142#issuecomment-673667998, https://github.com/solex2006/SELIProject/issues/142#issuecomment-710527345 that are not done

---

• [x] When user adds a new topic without completing its required fields, it shows that there are informations missing. But if user changes the order of the topics, it says the step is completed and user can access the program step.

Required fields of topic 1 are completed but not of topic 2:

After moving it up (still without the information):

• [x] The opposite also happens: if user doesn't complete the fields of the first topic but completes the second, it says the step is completed.

---

• [x] It is not possible to delete information from input fields:

Steps to reproduce:

• Complete any field of the topic;
• Close the expansion panel and open it again;
• Try to delete the information

---

• [x] It is possible to publish a course with blank lesson title:

How it is in Program Step:

Steps to reproduce:

• Open an unit
• Click on "Add lesson""
• Click on the "X" button of the lesson name field

---

• [x] Remove the tip "If you need help select an option" of the page

---

• [x] There should be a task table widget for courses configurations Guided, Without template, By topics

---

For presentation resource:

• [x] User can save an h5p with a externa resource == true:

Steps to reproduce:

• User first makes a resource with type = file and checks the external resource true

  

• Then change the type to h5p

  

• External resource is saved as True

  

---

• [ ] Some checkboxes with default value == true, when saved appears as false

For example: When editing:

When saved:

[caroltaus]

About the MoveTableButton, this has already been coded by @ecureuill in her demo, you can use that to help on its implementation

On line 230 https://codesandbox.io/s/stepper-with-colorful-status-tsz10?file=/design/activityDesign.js

---

This parte of the requirement was a bit confusing

so i checked the demo to figure out what types of Tasks each course model should have:

• [x] Spiral: Activity and Quiz types of Tasks
• [x] Consistent Met: Activity, Problem and Quiz types of Tasks
• [x] Toybox: Activity, Problem, Quiz and Forum types of Tasks
• [x] Without template by Topic: Activity, Quiz and Forum types of Tasks
• [x] Without template by Unit in Lessons: ctivity, Quiz and Forum types of Tasks

[EduKobaiashi]

• [ ] When saving an Other type of game resource the external resource is saving as false and in this case the external URL should be required

---

• [ ] It's possible to create a file type presentation with a blank external url. Steps to reproduce:

1. Add item
2. Mark External Resource as true
3. Change to any other type
4. Change back the type to file
5. Give it a name
6. Save it

---

• [ ] It's possible to create a blank lesson/unit/topic title by using space (" ")

---

• [ ] For supplementary materials when externalClumnTable == false the default value should be externalRefClumnTable="", but it's possible to save it with a different value. Steps to reproduce:

1. Add item
2. Mark External Resource as True
3. Add something to the External Reference
4. Mark External Resource as False
5. Give it a name
6. Save it