ecureuill commented 4 years ago

: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

Features
1. Organization Tab
2. Content Area
  1. Topic Template
  2. Task Template
  3. Layout Variants
3. Preview Mode
  1. Topic Template
  2. Task Template
  3. Layout Variants
Usability
Validations
Error Prevention
Feedback
1. Labels
2. Instructions
3. Help button
4. Error Identification
Wire frames

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

Features

These are general features of the Program Step that should be coded together with Templates specifications -Program step - activity page -Program step - content page -Program step - problem page -Program step - forum page

Organization tab

[x] on Organization tab Header's show the name of the CoursePlan[TemplateCourse] or CoursePlan[StructureCourse] in use
[x] on Organization tab Header's remove the option to change course structure

If CoursePlan[StructureCourse] == StructureCourseUnit OR CoursePlan[StructureCourse] == StructureCourseTopic

[x] organization tab keeps the same as it is in currently release.

if CoursePlan[TemplateCourse] != TemplateCourseWithout

[x] List the Design[Topics] and nested the Design[TopicTasks] of the respective Topic
[x] No option to edit the name of Topics or Tasks
[x] No option to delete Topics or Tasks
[x] No option to add Topics or Tasks

Content Area

if CoursePlan[TemplateCourse] == TemplateCourseWithout

[x] Content Area keeps the same as it is in currently release.

if CoursePlan[TemplateCourse] != TemplateCourseWithout

[x] If teacher selects a Topic in organization tab, Content Area loads the Topic Template
[x] If teacher selects a Task in organization tab, Content Area loads the Task Template
[x] Each box of these layouts are drag-and-drop areas
[x] Each box type accepts specific type of components
[x] Each box type accepts multiple components with some limitation (see table bellow).
- [x] Multiple contents can be displayed one above of other (as it's in current version)

box name	accepted components restrictions	max components
Audio	audio component	no limit
Video	video component	8
Image	image component	8
Embedded	embedded component h5p component	no limit
Unit	unity component	no limit
File	pdf component compressed component	no limit
Link	link component	no limit
Task	activity component quiz component	1
Main	text component link component	no limit

Table with the correspondence between resources (design step) and Authoring Tool components.	Resources	Authoring Tool component
TasksQuiz	Quiz
TasksActivity	Activity component, delivery type: text storytelling upload
TasksProblem	Activity component, delivery type: text storytelling upload
TasksForum	Activity component, delivery type: forum
ResourcesAudios	Audio
ResourcesVideos	Video
ResourcesImages	Image
ResourcesSuplemantaryMaterial[`versionClumnTable==digital`]&& ResourcesSuplemantaryMaterial[`externalClumnTable==true`]	Link
ResourcesSuplemantaryMaterial[`versionClumnTable==digital`] && ResourcesSuplemantaryMaterial[`externalClumnTable==false`]	PDF Compressed
ResourcesPresentation[`externalClumnTable==true`]	Link Embedded
ResourcesPresentation[`typeClumnTable==h5p`]	h5p
ResourcesPresentation[`typeClumnTable==file && externalClumnTable==true`]	PDF Compressed
ResourcesGames[`typeClumnTable==h5p`]	h5p
ResourcesGames[`typeClumnTable==unity`]	unity
ResourcesGames[`externalClumnTable==true`]	Link

Topic template

Task template

Layout Variants

Below templates layouts assume that teachers select all type of resources in Design step.

[x] If, as result of Design step, teacher do not select any equivalent resources of a box area, the box should be hidden. Check above tables
[x] If the hidden box was side by side with another box, this box should occupy the hidden box area

In this example, teacher do not select:

video (video box)
h5p presentation (embedded box)
h5p game (embedded box)
unity game (unity box)

Thus, the correspondent boxes was hidden and image box occupy full width

Preview Mode

[ ] contents should be rendered with the accessibilty settings
- [x] Video and Video Gallery #159
- [x] Image and Image Gallery #160
- [x] Audio #164
- [x] others see https://codesandbox.io/s/prototype-tsz10?file=/course/topic.jsx
[x] component: Dialog with fullscreen
- Close button
- Title: Preview
[x] If CoursePlan[TemplateCourse] == TemplateCourseWithout loads the content of the Content Area, following the sequence order of the contents, without template.
[x] If CoursePlan[TemplateCourse] != TemplateCourseWithout should loads the content of the Content Area applying the layout in use
- [ ] Should display empty boxes (no content added yet) with a message of This area is reserved for [PURPOSE OF THE BOX AREA] (check the wire-frame of preview mode)

Topic Page Template

Following boxes will be loaded with contents from previous steps.

[ ] Topic: Design[Topic.Name], component <h1>
[ ] Evaluation: Design[Topic.Evaluation], component <p>
[ ] Subactivities: Design[Topic.Tasks], component <table>

Task Page Template

Layout Variants

[x] Responsive Design: Layout should be adjusted conditionally to viewport width, keeping the sequence of the content as the same of the boxes's numbers .
[x] Multiple Image: If more than one image was added by teacher, loads image gallery widget (#160) in the Image box. Gallery will occupy 100% of the width
[x] Multiple Videos: If more than one video was added by teacher, load video gallery widget (#159 ) in the Video box. Gallery will occupy 100% of the width

Usability

N/A

Validations

N/A

Error Prevention

N/A

Feedback

[x] cursor: "grab" over Content Tab's itens
[x] cursor: "grabbing" when dragging one Content Tab's item
~~[ ] cursor: "not-allowed" when dragging one Content Tab's item over a drag-and-drop area that do not allow this type of item~~
~~[ ] cursor: "no-drop" when dragging one Content Tab's item over any area that is not a drag-and-drop area~~

Labels

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

field	visible label	aria-label or aria-labelledby
OrganizationTabHeader	Spiral Model or Consistent Metaphor or Toy Box or By Units and Lessons or By Topics

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

field	Inline Instruction	Placeholder	Tooltip

Help button ("More details")

N/A

Error Identification and Suggestion

field	Validation	Error message

Wire-frames

Organization tab

by unit by topic spiral consistent metaphor toybox

Course Content Area

Without template

preview mode

With template

Boxes restrictions

preview mode

github-actions[bot] commented 4 years ago

This Feature Request was accepted and is ready for specfication.

ecureuill commented 4 years ago

Meet May 25 @ecureuill @flaviolima @juantenesaca

In couse plan step, teacher selects a model: Spiral Model, Consistent Metaphor, Toybox
1. Each model has a set of templates
in design step, teacher creates the course structure by adding one or more topics (course subjects)
1. For each Topic, list the resources he will use
  1. Materials, e.g. texts, books, videos, etc
  2. Tasks, i.e activities, quiz, forum, problems
    1. For each task, also list materials
in program step, system should load with
1. Organization tab: list of topics and tasks (see wireframes below)
2. Content Area: will load with a template
  1. Content Area in Topics: using the Topic Page Template of the selected model (course plan step)
  2. Content Area in Activity: using the Activity Page Template of the selected model (course plan step)
  3. Content Area in Problems: using the Problem Page Template of the selected model (course plan step)
  4. Content Area in Forum: using the Forum Page Template of the selected model (course plan step)

Wireframe

Organization tab

Course Content Area

These are just for example purpose, not a real template. Templates are going to be detailed in issues tracked in #60 by @flaviolima

Colourful area is just for identification purpose in this example.

github-actions[bot] commented 4 years ago

This Feature is ready to be implemented.

ecureuill commented 4 years ago

@juantenesaca @CAndresH please have a look.

juantenesaca commented 4 years ago

@ecureuill Is it necessary to have the option to edit, erase or add units or topics on the navigation tab? What do you think to have this functionalities only in the design step?

ecureuill commented 4 years ago

@juantenesaca

@ecureuill Is it necessary to have the option to edit, erase or add units or topics on the navigation tab? What do you think to have this functionalities only in the design step?

This functionality is exclusive for the "Free" flow. If teacher selects on Course Plan the Guided option, teacher only manage topics/units on Design step. But if teacher selects on Course Plan the Free option, teacher will manage topics/units on Program step (as it was before instructional design changes)

juantenesaca commented 4 years ago

@ecureuill Ok, thanks for the clarification.

caroltaus commented 3 years ago

[x] Typing errors:

Should be "Required step" "Requiredaaa"

~~[ ] Tasks are not appearing in the organization tab when user creates a course by topics~~

[x] ~~User cannot add/edit/delete in organization tab when in free flow (like described in https://github.com/solex2006/SELIProject/issues/143#issuecomment-647627803 )~~ This is now done on the Design Step

caroltaus commented 3 years ago

[x] There's no field to add instructions like the snackbar asks the user

caroltaus commented 3 years ago

[x] Snackbar says "audio content" for image content

ecureuill commented 3 years ago

[x] Preview is crashing with a blank page

c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9 TypeError: Cannot read property 'bind' of undefined
    at c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:131
    at Array.map (<anonymous>)
    at f.loadingPage (c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:131)
    at f.render (c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:131)
    at vc (c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9)
    at hc (c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9)
    at kl (c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9)
    at Yl (c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9)
    at Xl (c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9)
    at Vl (c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9)
Ic @ c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9
Uc.r.callback @ c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9
Ro @ c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9
Bo @ c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9
Jl @ c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9
t.unstable_runWithPriority @ c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9
uo @ c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9
Zl @ c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9
Vl @ c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9
(anonymous) @ c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9
t.unstable_runWithPriority @ c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9
uo @ c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9
vo @ c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9
ho @ c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9
se @ c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9
Tr @ c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9
c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:131 Uncaught TypeError: Cannot read property 'bind' of undefined
    at c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:131
    at Array.map (<anonymous>)
    at f.loadingPage (c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:131)
    at f.render (c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:131)
    at vc (c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9)
    at hc (c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9)
    at kl (c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9)
    at Yl (c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9)
    at Xl (c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9)
    at Vl (c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9)

caroltaus commented 3 years ago

[x] Responsiveness errors:

modals are not completely shown:

buttons on top of each other:

github-actions[bot] commented 3 years ago

Functional Test failed! Please, review your solution.

ecureuill commented 3 years ago

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 commented 3 years ago

Due the library react-smooth-dnd creates a ghost element when dragging elements. It is not possible to change the cursor icon during this event. I have changed the colors, opacities and background images to solve the drag and drop feedback. Please review the solution.

github-actions[bot] commented 3 years ago

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

github-actions[bot] commented 3 years ago

Functional Test failed! Please, review your solution.

There are tasks on the requirement that have not been done, and bugs still occuring (https://github.com/solex2006/SELIProject/issues/143#issuecomment-664575069)

~~[ ] Keyboard navigation for image and video galleries in previews are not working~~
[x] Clicking on an image/video is not opening it to its full width

juantenesaca commented 3 years ago

Hello @caroltaus,

About "Keyboard navigation for image and video galleries in previews are not working", this should not be a requirement here, due this has already two issues to develop, number #159 and #160. Plus, It is is not quite important, because program step is in the tutor side.

github-actions[bot] commented 3 years ago

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

caroltaus commented 3 years ago

@juantenesaca yes, it doesn't need to be accessible in tutor's side. Please delete, then, the instructions

juantenesaca commented 3 years ago

@caroltaus It does not to be deleted, because anyway we have to achieve this feature in image and video gallery issues. My suggestion was that it does not need to be mentioned here in the program, because there are issues dedicated for it.

caroltaus commented 3 years ago

@juantenesaca okay, i understand what you mean now! thank you

github-actions[bot] commented 3 years ago

Functional Test failed! Please, review your solution.

Some tasks in the requirement haven't been done

github-actions[bot] commented 3 years ago

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

github-actions[bot] commented 3 years ago

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

solex2006 / SELIProject

Authoring Tool - Program Step #143

Index

Wire frames

Features

Organization tab

Content Area

Topic template

Task template

Layout Variants

Preview Mode

Topic Page Template

Task Page Template

Layout Variants

Usability

Validations

Error Prevention

Feedback

Labels

Instructions

Help button ("More details")

Error Identification and Suggestion

Wire-frames

Organization tab

Course Content Area

Without template

preview mode

With template

preview mode

Wireframe

Organization tab

Course Content Area