Course - Syllabus Page

[ecureuill]

Current version

New version

• [x] If the tutor has uploaded the syllabus as a PDF file in CoursePlan step, the system presents it to the user in a modal.

• [x] If tutor select to GuigedCourse in Course Plan step, the system creates the syllabus with the information from the course creation and present it in a modal.

Web Syllabus

• [x] System should create the Syllabus following the structure shown in the following HTML. https://codesandbox.io/s/prototype-tsz10?file=/course/syllabus.jsx

:nerd_face: Notation used in the HTML

• STEP_IDENTIFICATION[INPUT_IDENTIFICATION]

  INFORMATION[CourseTitle] means that you should render the content of CourseTitle input form INFORMATION step

• STEP_IDENTIFICATION[...INPUT_IDENTIFICATION]

  ... means that you should render each element of the input (an array) if its within a list, each element should be rendered as list item <li>DESIGN[...Topic.PreKnowladges]</li> if its within a header, each element should be rendered as a header

• STEP_IDENTIFICATION[...INPUT_IDENTIFICATION.ATTRIBUTE]

  ... means that you should render the attribute of each element of the list

Dialogs

1. • [x] Full Width: Layout design consistency #51
2. • [x] Design Pattern must follows WAI-ARIA Practices for modal (meet #136)
     1. • [x] role="dialog"
     2. • [x] keyboard navigation (meet #101 )
     3. • [x] aria-modal=true
     4. • [x] aria-describedby=
     5. • [x] First focus
     6. • [x] Focus after dialog is closed

Accessibility

• [x] #114 Table of Conten (ToC)
• [x] #110 Skip Link to ToC
• [x] #116 focus indicator for Target content of skip link and ToC
• [x] #112
• [x] #118
• [x] #115
• [ ] #135
• [x] #113
• [x] #111
• [x] #101
• [x] #99
• [x] #97
• [ ] #93
• [x] #92
• [x] #87
• [x] #54
• [x] #49
• [x] #124 this is of responsibility of SELI team
• [x] #122 this is of responsibility of SELI team, if unusual words are used, SELI team must inform developers so they can code it

[github-actions[bot]]

This Feature is ready to be implemented.

[ecureuill]

@CAndresH @juantenesaca (please update assignee list, so we know to whom address the bugs)

General

• [x] Check the syllabus content and code of demo, it's not a copy from course main page. If you need to change some content, let me know so I check if MAmélia

• [x] The dialog title should be the "Course Syllabus" and you can remove it from the content

• [x] Close button should not be within the heading

• [x] Notice that ToC need to reflect the current sections of Syllabus, thus must be dynamically created because syllabus content will difere from course to course.

• [x] Keep content align to left, do not center text

• [x] The logo image is a decorative image, thus must have alt=""

• [x] Remember to keep styles in stylesheet

• [x] Is missing Course Content (Topics/Units) in ToC (check demo)

• [x] Not all entry of Table of Content (ToC) are jumping to the correspondent section (accessibility/usability fault)

• [x] Need to style ToC to nest entries.

A suggestion of style

• [x] Wrong heading levels

• [x] This items should be a list title/description not headings

• [x] This entire block is marked as list, but should not be

[ecureuill]

• [x] :bomb: Syllabus is crashing with a blank page (check with Juan if is the same problem of preview crashing #143 )

  
  c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9 TypeError: Cannot read property 'length' of undefined
  at s (c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:131)
  at ki (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)
  at c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9
  at t.unstable_runWithPriority (c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9)
  at uo (c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9)
  at vo (c0bae6d7666d0b255aca1ebb26ea4428dd8afd82.js?meteor_js_resource=true:9)

propiedades en silabus {courseInformation: {…}, language: {…}} courseInformation: accessibility: Array(3) 0: audienceError: false audienceallError: true audienceallgolError: true audiencegolError: false proto: Object 1: audienceError: false audienceallError: true audienceallgolError: true audiencegolError: false proto: Object 2: learningobjectives: false modality: false outcomes: false pedagogical: false proto: Object length: 3 proto: Array(0) analysis: Array(5) 0: null 1: "online" 2: "sdfsdfsdfsdf" 3: analyzing: [] applying: [] creating: Array(1) 0: {label: "esdfsdf", aux: "build", editing: false} length: 1 proto: Array(0) evaluating: Array(1) 0: {label: "sfsdf", aux: "conclude", editing: false} length: 1 proto: Array(0) remembering: [] understanding: [] proto: Object 4: contents: Array(1) 0: {label: "sdfsdf", aux: "understand", editing: false} length: 1 proto: Array(0) skills: [{…}] values: [{…}] proto: Object length: 5 proto: Array(0) classroom: ["4wQ6zqA79xmD7Qve8"] coursePlan: {guidedCoursePlan: "guided", courseTemplate: "without", courseStructure: "topic"} createdBy: "cecureuil" creationDate: Sun Aug 23 2020 16:39:29 GMT-0300 (Horário Padrão de Brasília) {} description: "In this course we will create an accessible course for visual impaired students " design: Array(1) 0: activities: [] editing: false evaluation: "sdfsdf" key: "topic1" learnGols: "sdsfsdf" lessons: Array(1) 0: activities: [{…}] key: "lesson1" title: "Lesson 01" tools: Array(6) 0: {checked: false, key: "audio", label: "Audios"} 1: {checked: false, key: "games", label: "Games", items: Array(0)} 2: {checked: false, key: "images", label: "Images"} 3: {checked: false, key: "presentation", label: "Presentation", items: Array(0)} 4: {checked: false, key: "supplemantary", label: "Supplementary Text", items: Array(0)} 5: {checked: false, key: "videos", label: "Videos"} length: 6 proto: Array(0) proto: Object length: 1 proto: Array(0) mainContent: "sdfds" preKnowledge: "sdfsdf" title: "Images" tools: Array(6) 0: {checked: false, key: "audio", label: "Audios"} 1: {checked: false, key: "games", label: "Games", items: Array(0)} 2: {checked: false, key: "images", label: "Images"} 3: {checked: false, key: "presentation", label: "Presentation", items: Array(0)} 4: {checked: false, key: "supplemantary", label: "Supplementary Text", items: Array(0)} 5: {checked: false, key: "videos", label: "Videos"} length: 6 proto: Array(0) proto: Object length: 1 proto: Array(0) duration: "010:00:00" image: {_id: "8nwgGCoFT5PAxZwW7", size: 61320, type: "image/jpeg", name: "breakfast.jpg", meta: {…}, …} keyWords: (3) ["Course planning ", "Wcag ", "Accessibility "] language: 0 level: "" program: Array(1) 0: activities: [] items: Array(57) 0: {id: 0.828606917030871, type: "text", attributes: {…}} 1: {id: 0.41704387859581016, type: "text", attributes: {…}} 2: {id: 0.00006846139074201396, type: "text", attributes: {…}} 3: {id: 0.8172503491828862, type: "text", attributes: {…}} 4: {id: 0.5296233763903895, type: "text", attributes: {…}} 5: {id: 0.45455474278072217, type: "text", attributes: {…}} 6: attributes: {image: {…}, hasDescription: true, description: "", title: "Info Example 1", descriptionWidth: "calc(100% - 500px)", …} id: 0.7216791373139166 type: "image" proto: Object 7: {id: 0.38579564528215293, type: "text", attributes: {…}} 8: {id: 0.9869666265832975, type: "text", attributes: {…}} 9: {id: 0.17682062017970268, type: "text", attributes: {…}} 10: attributes: {image: {…}, hasDescription: true, description: "", title: "Info Example 2", descriptionWidth: "calc(100% - 500px)", …} id: 0.21812135375388886 type: "image" proto: Object 11: {id: 0.8558965033466848, type: "text", attributes: {…}} 12: {id: 0.290561764592177, type: "text", attributes: {…}} 13: {id: 0.5612006469093445, type: "text", attributes: {…}} 14: {id: 0.3906974459740855, type: "text", attributes: {…}} 15: {id: 0.39556859387879006, type: "text", attributes: {…}} 16: attributes: {image: {…}, hasDescription: true, description: "", title: "Info Example 3", descriptionWidth: "calc(100% - 500px)", …} id: 0.04995625509875423 type: "image" proto: Object 17: {id: 0.9472487745874361, type: "text", attributes: {…}} 18: {id: 0.6510302825266872, type: "text", attributes: {…}} 19: {id: 0.7353093731207134, type: "text", attributes: {…}} 20: attributes: {image: {…}, hasDescription: true, description: "", title: "Info Example 4", descriptionWidth: "calc(100% - 500px)", …} id: 0.27266459918219743 type: "image" proto: Object 21: {id: 0.1592484389389739, type: "text", attributes: {…}} 22: {id: 0.2853201410627888, type: "text", attributes: {…}} 23: {id: 0.6395309272562675, type: "text", attributes: {…}} 24: {id: 0.41441163302692363, type: "text", attributes: {…}} 25: attributes: {image: {…}, hasDescription: true, description: "", title: "Info Example 5", descriptionWidth: "calc(100% - 500px)", …} id: 0.49071882704728487 type: "image" proto: Object 26: {id: 0.11618289558350936, type: "text", attributes: {…}} 27: {id: 0.3058031060532591, type: "text", attributes: {…}} 28: {id: 0.6936700047921374, type: "text", attributes: {…}} 29: {id: 0.4954323109688179, type: "text", attributes: {…}} 30: {id: 0.29674974106606866, type: "text", attributes: {…}} 31: {id: 0.4058469550975694, type: "text", attributes: {…}} 32: attributes: {image: {…}, hasDescription: true, description: "", title: "Deco Example 1", descriptionWidth: "calc(100% - 500px)", …} id: 0.05600070965170967 type: "image" proto: Object 33: {id: 0.706193496151412, type: "text", attributes: {…}} 34: {id: 0.8647676120609069, type: "text", attributes: {…}} 35: {id: 0.800351819916953, type: "text", attributes: {…}} 36: attributes: {image: {…}, hasDescription: true, description: "", title: "Deco Example 2", descriptionWidth: "calc(100% - 500px)", …} id: 0.14344205514730057 type: "image" proto: Object 37: {id: 0.3739538269136018, type: "text", attributes: {…}} 38: {id: 0.9603144096665865, type: "text", attributes: {…}} 39: {id: 0.47959216012710915, type: "text", attributes: {…}} 40: {id: 0.2600003234150976, type: "text", attributes: {…}} 41: attributes: {image: {…}, hasDescription: true, description: "", title: "text Example 1", descriptionWidth: "calc(100% - 500px)", …} id: 0.22183639372464614 type: "image" proto: Object 42: {id: 0.023697990206846153, type: "text", attributes: {…}} 43: {id: 0.9748960954364647, type: "text", attributes: {…}} 44: {id: 0.1682780017708747, type: "text", attributes: {…}} 45: attributes: {image: {…}, hasDescription: true, description: "", title: "Text Example 2", descriptionWidth: "calc(100% - 500px)", …} id: 0.6192495567588423 type: "image" proto: Object 46: {id: 0.675800242099037, type: "text", attributes: {…}} 47: {id: 0.0829938584078691, type: "text", attributes: {…}} 48: {id: 0.13434155126405978, type: "text", attributes: {…}} 49: {id: 0.6432173155876544, type: "text", attributes: {…}} 50: {id: 0.4555796900483218, type: "text", attributes: {…}} 51: attributes: {image: {…}, hasDescription: true, description: "", title: "Complex Example 1", descriptionWidth: "calc(100% - 500px)", …} id: 0.33413781537133946 type: "image" proto: Object 52: {id: 0.2511342312401317, type: "text", attributes: {…}} 53: {id: 0.017837437456942773, type: "text", attributes: {…}} 54: {id: 0.27205483159201505, type: "text", attributes: {…}} 55: attributes: accessibility: dataField: {longDescription: {…}, shortDescription: "Male peacock head", imagePurpose: "cplx", shortDescriptionError: false, longDescriptionError: false, …} isA11Y: Array(2) 0: {name: "shortDescription", is_a11y: true} 1: {name: "longDescription", is_a11y: true} length: 2 proto: Array(0) percentage: 100 pureDecorative: false proto: Object alignment: "row" description: "" descriptionWidth: "calc(100% - 500px)" hasDescription: true image: {_id: "quHcn286kybzNEJ2r", name: "image-cplx-ex02.jpg", link: "https://vm2161.kaj.pouta.csc.fi/opt/Seli/UploadFil…/quHcn286kybzNEJ2r/original/quHcn286kybzNEJ2r.jpg"} size: {width: 500, height: 300} title: "Complex Example 2" proto: Object id: 0.609472459667268 type: "image" proto: Object 56: {id: 0.7782708997357997, type: "text", attributes: {…}} length: 57 proto: Array(0) lessons: [{…}] name: "Images" proto: Object length: 1 proto: Array(0) published: true report: Array(4) 0: 100 1: 100 2: 100 3: 100 length: 4 proto: Array(0) requirements: Array(2) 0: [{…}] 1: [{…}] length: 2 proto: Array(0) signature: "" stepscompleted: (8) [0, 2, 6, 7, 1, 4, 3, 5] stepsflag: "saved" subtitle: "Planning an accessible course in SELI-Platform" support: Array(2) 0: Array(9) 0: {id: 0, value: "StudentsGrad", label: "Graduate Students", isChecked: true} 1: {id: 1, value: "StudentsInfor", label: "Informal Students", isChecked: false} 2: {id: 2, value: "Teachers", label: "Teachers and Professors", isChecked: true} 3: {id: 3, value: "Kids", label: "Preschool Kids", isChecked: false} 4: {id: 4, value: "post graduate student", label: "Post Graduate Students", isChecked: true} 5: {id: 5, value: "pregrade student", label: "Undergraduate Students", isChecked: false} 6: {id: 6, value: "High School Students", label: "High School Students", isChecked: false} 7: {id: 7, value: "Middle School Students", label: "Middle School Students", isChecked: false} 8: {id: 8, value: "Elementary School Students", label: "Elementary School Students", isChecked: false} length: 9 proto: Array(0) 1: Array(4) 0: {id: 0, value: "cog", label: "Cognitive disabilities", isChecked: false} 1: {id: 1, value: "Eld", label: "Diversity of Abilities", isChecked: false} 2: {id: 2, value: "Hear", label: "Hearing disabilities", isChecked: false} 3: {id: 3, value: "Vis", label: "Visual disabilities", isChecked: true} length: 4 proto: Array(0) length: 2 proto: Array(0) title: "WCAG 2.1" type: "" _id: "hKu96y8YfreaPboMQ" proto: Object language: {studentAccount: "Student account", tutorAccount: "Tutor account", reuseImg: "reuse image", reuseAudio: "reuse audio", audiomessage: "Double click over the item to select", …} proto: Object

props en content {data: Array(1), coursePlan: {…}, program: Array(1)} coursePlan: courseStructure: "topic" courseTemplate: "without" guidedCoursePlan: "guided" proto: Object data: Array(1) 0: activities: [] editing: false evaluation: "sdfsdf" key: "topic1" learnGols: "sdsfsdf" lessons: Array(1) 0: activities: Array(1) 0: {activity: "Example", type: "1", graded: true, group: 0, project: false, …} length: 1 proto: Array(0) key: "lesson1" title: "Lesson 01" tools: Array(6) 0: {checked: false, key: "audio", label: "Audios"} 1: {checked: false, key: "games", label: "Games", items: Array(0)} 2: {checked: false, key: "images", label: "Images"} 3: {checked: false, key: "presentation", label: "Presentation", items: Array(0)} 4: {checked: false, key: "supplemantary", label: "Supplementary Text", items: Array(0)} 5: {checked: false, key: "videos", label: "Videos"} length: 6 proto: Array(0) proto: Object length: 1 proto: Array(0) mainContent: "sdfds" preKnowledge: "sdfsdf" title: "Images" tools: Array(6) 0: {checked: false, key: "audio", label: "Audios"} 1: {checked: false, key: "games", label: "Games", items: Array(0)} 2: {checked: false, key: "images", label: "Images"} 3: {checked: false, key: "presentation", label: "Presentation", items: Array(0)} 4: {checked: false, key: "supplemantary", label: "Supplementary Text", items: Array(0)} 5: {checked: false, key: "videos", label: "Videos"} length: 6 proto: Array(0) proto: Object length: 1 proto: Array(0) program: Array(1) 0: activities: [] items: (57) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] lessons: [{…}] name: "Images" proto: Object length: 1 proto: Array(0) proto: Object

[ecureuill]

• [x] Syllabus dialog is crashing when is a PDF file (course title: a11y curso teste 01)

[CAndresH]

Hello Camila I have some doubts about the course syllabus for the following cases: When the teacher selects in course plan: guided-without-By topics or By units & lessons

in the demo, the content in the syllable course is filled with the data from the design step,

but for free-without-by topics or units, the design step does not have this information, you can only change the name of the unit and topic, in that case with what data should it be filled in? I have made changes in the syllable, check them and tell me

Another doubt : about the wrong headings, could you send a screenshot with the correct heading hierarchy?

thanks

[ecureuill]

Hi! @CAndresH

In the case of guided-without-By topics or By units & lessons, you can list the items using the ordered list tag <ol>

1. Topic A

2. Topic B

3. Topic C

4. Topic D

   or

5. Unit A

   1. Lesson X
   2. Lesson P

6. Unit B

   1. Lesson T

7. Unit C

8. Unit D

   1. Lesson O

[ecureuill]

Another doubt : about the wrong headings, could you send a screenshot with the correct heading hierarchy? You should follow the ToC structure, except for Readings and Assments methods that is

And as I already mentioned in the list of problems, Syllabus is not exactly the same content/presentation as the Course Main page. For instance, check the way course description, education language are presented

If you follow the demo structure, you will solve the heading and list problems I've reported

[CAndresH]

Correct Camila now the syllable is dynamic (ToC) and I have placed the headings as you describe them in your demo, the bug error is also corrected, please check, thanks

[github-actions[bot]]

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

[ecureuill]

Test is blocked by

• [x] #202

@CAndresH 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]]

Functional Test failed! Please, review your solution.

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 @

[CAndresH]

hello everyone please comment what are the errors?, @ecureuill @caroltaus ,

[ecureuill]

Hi @CAndresH everything that is not checked as done in specification needs your attention. When you finish all requirements, move to CODED

[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 still accessibility requirements to be done

---

• [x] Page is inaccessible for users that use screen readers with keyboard navigation

---

• [x] "Evaluation" is not appearing in syllabus

Demo:

How it is the website:

[CAndresH]

@rebeccamello @caroltaus , What content of the design should be in evaluation?

[caroltaus]

@CAndresH This information:

[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 still accessibility tasks in the requirement to be done

---

• [x] There are information from the Analysis Step missing from the syllabus, like the learning goals

and learning outcomes

---

• [x] course duration should be read in time format

[caroltaus]

• [ ] LearningApplyingObjectives are not being shown in syllabus

in course creation:

in syllabus:

---

• [x] Learning Constraints are not showing in syllabus (they are not being saved, apparently, because when you fill it in course creation, save the course, and then open the course in edition mode, they are not there anymore)

[CAndresH]

hi @caroltaus, please check now

[caroltaus]

LearningApplyingObjectives is still not appearing

In some cases, it is appearing with the wrong verb: