flaviolima commented 4 years ago

: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

General
Template
1. Layout Variants
Accessibility
1. Accessibility of Teacher contents

General

[x] Separate information and structure from presentation (use stylesheet files or embedded styles, do not style inline)
[x] Responsive design
[x] contents should be rendered with the accessibilty settings (check accessibility requirements for teacher contents)

Template

[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
[x] All contents will be loaded in the same order that teacher added in Program Step

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>

WhatsApp Image 2020-06-13 at 20 47 30

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
[x] In case of a box have not been filled (no content), this box should be hidden.
[x] If the hidden box was side by side with another box, this box should occupy the hidden box area

Accessibility

[x] #114 Table of Conten (ToC) for this page content, using the titles created by teachers (check syllabus demo)
[x] #110 Skip Link to ToC (check syllabus demo)
[ ] #116 focus indicator for Target content of skip link and ToC (check syllabus demo)
[x] #112
[x] #118
[x] #115
[ ] #135
[ ] #113
[x] #111
[ ] #101
[x] #99
[x] #97
[ ] #93
[ ] #92
[ ] #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

Accessibility of Teacher's contents

[ ] Video and Video Gallery #159
[ ] Image and Image Gallery #160
[ ] Audio #164
[ ] others see https://codesandbox.io/s/prototype-tsz10?file=/course/topic.jsx (code sample bellow)

Link component

<ul className={classes.linklist}>
<li>
    <OpenInNewIcon />
    <a
        id="link_1_instructions"
        href="[url]"
        aria-describedby="link_1_description"
    >
        [Link description]([external])
    </a>
    <p id="link_1_description" className={classes.linkInstructions}>
        [Instructions]
    </p>
</li>
<li>
    <OpenInNewIcon />
    <a id="link_3" href="https://pt.wikipedia.org/wiki/Minecraft">
        Wikipedia: Minecraft (external)
    </a>
</li>
<li>
    <OpenInNewIcon />
    <a
        id="link_2"
        aria-describedby="link_3_description"
        href="https://www.minecraft.net/pt-br/"
    >
        Minercraft
    </a>
    <p id="link_2_description" className={classes.linkInstructions}>
        Game resource...
    </p>
</li>
<li>
    <OpenInNewIcon />
    <a id="link_4" aria-describedby="link_4_description" href="#">
        Minecraft as educational tool (external)
    </a>
    <p id="link_4_description" className={classes.linkInstructions}>
        Presentation about...
    </p>
</li>
</ul>

File/Compressed Component

<ul className={classes.filelist}>
    <li>                
    <AttachFileIcon/>
    <a id="file_1_instructions" href="file.file" aria-describedby="file_1_instructions">Open|Dowload [File description]([file type])</a>
        <p id="file_1_instructions" className={classes.fileInstructions}>[Instructions]</p>
    </li>
    <li>
        <AttachFileIcon />
        <a id="file_2" href="file.pdf">Open Calc IV(pdf)</a>
    </li>
    <li>
        <AttachFileIcon />
        <a id="file_3" aria-describedby="file_3_instructions" href="file.ppt">Open Diagram of Venn (ppt)</a>
        <p id="file_3_instructions" className={classes.fileInstructions}>Some instruction...</p>
    </li>
    <li>
        <AttachFileIcon />
        <a id="file_4" aria-describedby="file_4_instructions" href="2009mycorp_report.zip">Dowload project (zip)</a>
        <p id="file_4_instructions" className={classes.fileInstructions}>Some instruction...</p>
    </li>
</ul>

Embedded / H5P Component

<React.Fragment>
    <h3 id={"iframe_"+index+"_title"}>{embedd.title}</h3>
    <p id={"iframe_"+index+"_descr"} className={classes.embeddInstructions}>{embedd.instructions}</p>
    <iframe 
    aria-labelledby={"iframe_"+index+"_title"}
    aria-describedby={"iframe_"+index+"_descr"}
    title={"embedded_"+index} 
    src={embedd.src} 
    className={classes.embedd} />
</React.Fragment>