Skip to content

Commit a1c21a3

Browse files
dwalizerdwalizer
authored
Merge pull request #313 from NationalSecurityAgency/t#230/training_guide
T#230/training guide
2 parents 009d369 + f295f22 commit a1c21a3

27 files changed

+779
-35
lines changed

‎cypress/e2e/progress-and-ranking.cy.js‎

Lines changed: 60 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,21 @@ context('Progress and Ranking: Generate Screenshots', () => {
3131
cy.snap('page-progress-and-rankings-view-my-usage');
3232
});
3333

34+
it('My Rank Page', () => {
35+
cy.visit('/progress-and-rankings/projects/movies/rank')
36+
cy.get('[data-cy="myRankPositionStatCard"] [data-cy="mediaInfoCardTitle"]').should('be.visible')
37+
cy.get('[aria-label="Ranked number 1"]').should('be.visible')
38+
cy.snap('page-progress-and-rankings-my-rank', '#mainContent2');
39+
});
40+
41+
it('My Rank Page', () => {
42+
cy.visit('/progress-and-rankings/projects/movies/badges')
43+
cy.get('[data-cy="achievedBadges"]').should('be.visible')
44+
cy.get('[data-cy="availableBadges"] [data-cy="badgeTitle"]').should('be.visible')
45+
cy.snap('page-progress-and-rankings-my-badges', '#mainContent2');
46+
});
47+
48+
3449
it('Gen View Badges page', () => {
3550
cy.visit('/progress-and-rankings/my-badges')
3651
cy.snap('page-progress-and-rankings-badges');
@@ -64,16 +79,60 @@ context('Progress and Ranking: Generate Screenshots', () => {
6479
cy.get('[data-cy="skillProgress_index-0"]')
6580
cy.snap('client-display-subject', '[data-cy="skillsDisplayHome"]', { clip: clipScreenshot });
6681

82+
cy.visit('/progress-and-rankings/projects/movies/subjects/Comedy');
83+
cy.get('[data-cy="skillsDisplayHome"] [data-cy="pointHistoryChart-animationEnded"]')
84+
cy.get('[data-cy="skillProgress_index-0"]')
85+
cy.snap('client-display-subject-comedy', '#mainContent2', { clip: clipScreenshot });
86+
87+
6788
cy.get('[data-cy="skillsDisplayHome"] [data-cy=toggleSkillDetails]').click()
6889
cy.get('[data-cy="skillsDisplayHome"]').contains('Overall Points Earned');
6990
cy.snap('client-display-subject-expandedSkills', '[data-cy="skillsDisplayHome"]', { clip: clipScreenshot });
7091
});
7192

93+
it('Gen Skills Display - single skill group', () => {
94+
cy.visit('/progress-and-rankings/projects/movies/subjects/Action');
95+
cy.get('[data-cy="skillsDisplayHome"] [data-cy="pointHistoryChart-animationEnded"]')
96+
cy.get('[data-cy="skillProgress_index-0"]')
97+
98+
cy.snap('client-display-single-skill-group', '#skill-GuardiansoftheGalaxyGroupId');
99+
});
100+
101+
it('Gen Skills Display - badge page', () => {
102+
cy.visit('/progress-and-rankings/projects/movies/badges/TheTwilightCollection');
103+
cy.get('[data-cy="badge_TheTwilightCollection"]').should('be.visible')
104+
cy.get('[data-cy="skillProgress_index-0"]')
105+
106+
cy.snap('client-display-badge-page', '#mainContent2');
107+
});
108+
109+
it('Gen Skills Display - skill page - avatar', () => {
110+
cy.visit('/progress-and-rankings/projects/movies/subjects/Action/skills/Avatar');
111+
cy.get('[data-cy="skillProgressTitle"]').should('be.visible')
112+
113+
cy.snap('client-display-skill-page-avatar', '#mainContent2');
114+
});
115+
116+
it('self report honor tag', () => {
117+
cy.visit('/progress-and-rankings/projects/movies/subjects/Comedy/skills/MonstersInc');
118+
cy.get('[data-cy="skillProgressTitle"]').should('be.visible')
119+
120+
cy.snap('client-display-page-honor-tag', '#mainContent2');
121+
cy.snap('client-display-self-report-honor-tag', '[data-cy="skillProgressTitle-MonstersInc"]');
122+
})
123+
124+
it('prerequisites card', () => {
125+
cy.visit('/progress-and-rankings/projects/movies/subjects/Action/skills/TheAvengers');
126+
cy.get('[data-cy="skillProgressTitle"]').should('be.visible')
127+
128+
cy.wait(5000)
129+
cy.snap('client-display-card-prerequisites', '[data-cy="prerequisitesCard"]');
130+
})
131+
72132
it('Gen Skills Display - skill with depts', () => {
73133
cy.visit('/test-skills-display/movies/subjects/Family/skills/HarryPotterandtheGobletofFire');
74134
cy.get('[data-cy="skillLink-movies-HarryPotterandthePhilosophersStone"]')
75135
cy.wait(5000)
76-
cy.snap('client-display-skillWithDeps', '[data-cy="skillsDisplayHome"]');
77136
});
78137

79138
it('Gen Self Report Skill', () => {

‎docs/.vuepress/config.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ sidebar = sidebar.concat([{
111111
'/dashboard/install-guide/installModes',
112112
]
113113
}, {
114-
text: 'Dashboard User Guide',
114+
text: 'Admin User Guide',
115115
collapsible: true,
116116
children: [
117117
'/dashboard/user-guide/',
@@ -134,6 +134,16 @@ sidebar = sidebar.concat([{
134134
'/dashboard/user-guide/inception',
135135
'/dashboard/user-guide/contact-admins',
136136
'/dashboard/user-guide/settings',
137+
'/dashboard/user-guide/accessibility',
138+
]
139+
}, {
140+
text: 'Training Participation Guide',
141+
collapsible: true,
142+
children: [
143+
'/training-participation/',
144+
'/training-participation/training-portfolio',
145+
'/training-participation/take-training',
146+
'/training-participation/accessibility',
137147
]
138148
}, {
139149
text: 'Integration Guide',

‎docs/dashboard/user-guide/accessibility.md‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
# Accessibility
2+
3+
At SkillTree, we're dedicated to creating an accessible learning environment that empowers everyone to succeed. This guide highlights our accessibility features and best practices to ensure you can navigate and engage with our platform effortlessly.
4+
5+
This guide is broken down into two section where the first section outlines accessibility features of the SkillTree
6+
Dashboard and the second provides instructions about creating a SkillTree gamified accessible training in the platform.
7+
8+
## Dashboard Accessibility
9+
10+
This section outlines the accessibility features and best practices for the SkillTree Dashboard.
11+
12+
::: tip
13+
Please Note that this accessibility guide is for users interested in creating gamified training experiences in SkillTree Platform.
14+
If you are interested in earning credits in existing trainings, please check out our [Taking a Training Accessibility Guide](/training-participation/accessibility.html#accessibility) for more details.
15+
:::
16+
17+
### Navigation
18+
19+
#### Basic Navigation
20+
<Content path="/training-participation/common/accessibility-basic-nav.md"/>
21+
22+
#### Landmark Navigation
23+
24+
The heading structure is organized hierarchically to facilitate easy navigation using screen reader landmark navigation.
25+
26+
For example, on a project page, the heading levels are organized as follows:
27+
- The project title serves as the main heading (Level 1)
28+
- Subjects (Level 2 heading that groups all subjects)
29+
- Each subject is a Level 3 heading
30+
31+
This heading hierarchy enables efficient navigation through screen readers. For example, using JAWS Screen Reader:
32+
1. List all headings with `INSERT+F6`
33+
2. Navigate directly to the first subject by pressing `3` for the first Level 3 heading
34+
3. Press `3` again to move to the next subject heading
35+
4. Once you reach your desired subject, press `Enter` to drill down into the subject
36+
37+
#### Skip to Main Content
38+
39+
<Content path="/training-participation/common/accessibility-skip-to-content.md"/>
40+
41+
### Screen Reader Support
42+
43+
<Content path="/training-participation/common/screen-reader-support.md"/>
44+
45+
### Visual Adjustments
46+
47+
<Content path="/training-participation/common/accessibility-visual-adjustments.md"/>
48+
49+
### Video, Multimedia and Images
50+
51+
- Descriptive alt text is added to meaningful images
52+
- Video captions are provided where applicable
53+
- Video and audio transcripts are provided where applicable
54+
55+
### Rich Text Editor
56+
57+
The SkillTree description editor is a full-featured Rich Text Editor. The editor is used in the dashboard to provide
58+
descriptions for Projects, Subjects, Skills, Badges, and also for sending emails to users and project administrators.
59+
60+
It supports both tab-based navigation and keyboard shortcuts for text editing:
61+
<Content path="/dashboard/user-guide/common/rte-features-table.md"/>
62+
63+
## How Make Accessible Trainings
64+
65+
### Video and Audio Content
66+
When creating training content, ensure accessibility for all users by:
67+
- Providing transcripts for video files
68+
- Including captions for audio content
69+
- Refer to the [Audio/Video](/dashboard/user-guide/skills.html#audio-video) section for detailed upload instructions
70+
71+
### Image Accessibility
72+
For meaningful images in descriptions:
73+
1. Use the upload image feature
74+
- Click the `Insert Image` button
75+
- Or use the keyboard shortcut `CTRL+ALT+i`
76+
2. Add descriptive alt text in the `Description` input box of the insert image popup
77+
78+
### Text Formatting
79+
When pasting content into the description editor:
80+
- Use `CTRL+SHIFT+v` or right-click and select `Paste as Plain Text`
81+
- Avoid default paste operations from sources like Microsoft Word
82+
- Default paste operations can:
83+
- Carry inaccessible styles and formatting
84+
- Alter background colors
85+
- Create inaccessible and unattractive displays in dark mode
86+
87+
These practices ensure your content is accessible to all users, regardless of their needs or preferences.
88+
89+
90+
<Content path="/training-participation/common/accessibility-feedback.md"/>

‎docs/dashboard/user-guide/common/rte-features-table.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
| Feature | Shortcut | Explanation |
2+
|----------------|-----------------|------------------------------------------------------------------------------------------------------------------------------------------------------|
3+
| Copy & Paste | Ctrl+C / Ctrl+V | Paste anything from browser, screenshot, excel, powerpoint, etc. |
4+
| Headings | Ctrl+Alt+t | Supports 6 different sized headings |
5+
| Bold | Ctrl+B | Apply **bold** formatting to text |
6+
| Italics | Ctrl+I | Apply *italic* formating to text |
7+
| Strike | Ctrl+S | Apply ~~strike-through~~ formating to text |
8+
| Font Size | Ctrl+Alt+s | Apply a specific font size to text |
9+
| Line | Ctrl+L | Insert a horizontal line seperator |
10+
| Blockquote | Alt+Q | Apply quote formatting to line(s) of text |
11+
| Unordered List | Ctrl+U | A bulleted list |
12+
| Ordered List | Ctrl+O | A numbered list |
13+
| Indent | Fn+Tab | When creating a list, this will indent the list one level |
14+
| Outdent | Fn+Shift+Tab | When creating a list, this will outdent the list one level |
15+
| Image | Ctrl+Alt+i | Insert an image. Images may be chosen from a local file, a URL, or copy and pasted. |
16+
| Link | Ctrl+Alt+r | A hyperlink to an external resource |
17+
| Attachments | Ctrl+Alt+a | Attach a file to the description. Attached files will be stored on the SkillTree server and a link for downloading the attachment will be provided. |
18+
| Inline Code | Ctrl+Shift+C | Apply `code style` formatting inline |
19+
| Code Block | Ctrl+Shift+P | Apply `code style` to a multiline section |

‎docs/dashboard/user-guide/common/rte.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
The editor offers the following features:
2+
3+
<Content path="/dashboard/user-guide/common/rte-features-table.md"/>
4+
5+
![Description Editor Image 1](../../../screenshots/admin/rich-text-editor-1.png)
6+
![Description Editor Image 2](../../../screenshots/admin/rich-text-editor-2.png)
7+
![Description Editor Image 3](../../../screenshots/admin/rich-text-editor-3.png)
8+
![Description Editor Image 4](../../../screenshots/admin/rich-text-editor-4.png)
9+
![Description Editor Image 5](../../../screenshots/admin/rich-text-editor-5.png)

‎docs/dashboard/user-guide/quizzes-and-surveys.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,10 @@ A quiz is a knowledge check composed of multiple questions with a passing requir
4444
or can be executed independently. Associating a Quiz to an existing skill will require successful completion of that Quiz
4545
in order to earn the skill and its points. In the case of a quiz, then the quiz serves as the skill's knowledge check.
4646

47-
Quizzes currently support two types of questions:
48-
- ``Multiple Choice`` - question will only have 1 correct answer
49-
- ``Multiple Answers`` - question has 2 or more correct choices; all correct choices must be selected to get credit for the question
50-
- ``Input Text`` - question for test-takers to provide a free-form text answer that will later be graded by a quiz administrator
47+
Quizzes support three types of questions:
48+
- ``Multiple Choice`` - Single correct answer
49+
- ``Multiple Answers`` - Multiple correct choices; all must be selected to earn credit
50+
- ``Input Text`` - Free-form text response, graded by quiz administrators
5151

5252
To administer a quiz click `Manage` button for that quiz on the `Quizzes and Surveys` page.
5353

‎docs/dashboard/user-guide/rich-text-editor.md‎

Lines changed: 1 addition & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,4 @@
33
The SkillTree description editor is a full-featured Rich Text Editor. The editor is used in the dashboard to provide descriptions
44
for Projects, Subjects, Skills, Badges, and also for sending emails to users and project administrators.
55

6-
7-
The description editor has the following features:
8-
9-
| Feature | Shortcut | Explanation |
10-
|----------------|-----------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------|
11-
| Copy & Paste | Ctrl+C / Ctrl+V | Paste anything from browser, screenshot, excel, powerpoint, etc. |
12-
| Headings | Ctrl+Alt+t | Supports 6 different sized heading |
13-
| Bold | Ctrl+B | Apply **bold** formatting to text |
14-
| Italics | Ctrl+I | Apply *italic* formating to text |
15-
| Strike | Ctrl+S | Apply ~~strike-through~~ formating to text |
16-
| Font Size | Ctrl+Alt+s | Apply a specific font size to text |
17-
| Line | Ctrl+L | Insert a horizontal line seperator |
18-
| Blockquote | Alt+Q | Apply quote formatting to line(s) of text |
19-
| Unordered List | Ctrl+U | A bulleted list |
20-
| Ordered List | Ctrl+O | A numbered list |
21-
| Indent | Fn+Tab | When creating a list, this indent the list one level |
22-
| Outdent | Fn+Shift+Tab | When creating a list, this outdent the list one level |
23-
| Image | Ctrl+Alt+i | Insert an image. Images may be chosen from a local file, a URL, or copy and pasted. |
24-
| Link | Ctrl+Alt+r | A hyperlink to an external resource |
25-
| Attachments | Ctrl+Alt+a | Attach a file to the description. Attached files will be stored on the SkillTree server and a link for downloading the attachment will be presented. |
26-
| Inline Code | Ctrl+Shift+C | Apply `code style` formatting inline |
27-
| Code Block | Ctrl+Shift+P | Apply `code style` to a multiline section |
28-
29-
30-
![Description Editor Image 1](../../screenshots/admin/rich-text-editor-1.png)
31-
![Description Editor Image 2](../../screenshots/admin/rich-text-editor-2.png)
32-
![Description Editor Image 3](../../screenshots/admin/rich-text-editor-3.png)
33-
![Description Editor Image 4](../../screenshots/admin/rich-text-editor-4.png)
34-
![Description Editor Image 5](../../screenshots/admin/rich-text-editor-5.png)
6+
<Content path="/dashboard/user-guide/common/rte.md"/>

‎docs/dashboard/user-guide/screenshots/contact_admins_form.png‎

8.2 KB
Loading

‎docs/dashboard/user-guide/settings.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ Ability to customize your personal user preference, including:
1010
- Default Home/Landing Page
1111
- Ability to opt-out from Ranking and Leaderboards
1212
- Enabling and/or disabling UI Dark Mode
13+
- Customize keyboard shortcuts for training navigation
1314

1415
![User Preferences](../../screenshots/admin/page-settings-preference.png)
1516

‎docs/screenshots/admin/page-settings-preference.png‎

6.6 KB
Loading

0 commit comments

Comments
 (0)