diff --git a/src/components/help-for-instructors.jsx b/src/components/help-for-instructors.jsx new file mode 100644 index 000000000..0207a8530 --- /dev/null +++ b/src/components/help-for-instructors.jsx @@ -0,0 +1,93 @@ +import React from 'react'; + +const HelpForInstructors = () => { + + return ( + <> +
+

For Instructors

+

Check out the Materia Quickstart Guide for a brief introduction to creating a new widget.

+
+
+

Common Questions & Issues

+

General

+
+
Is Materia part of the LMS?
+
+

No. Materia is a platform that operates independently to the LMS, but integrates with it through a protocol called LTI. + You can authenticate to Materia through LTI, or directly by visiting the Login button.

+
+
Are there login credentials specific to Materia?
+
+

That depends on how your institution has configured Materia. If you visit Materia through your LMS, authentication is handled for you. If you login directly to Materia, + you may need credentials specifically set up for Materia. If logging in transitions you to a an external login, use the credentials associated with that external login instead.

+
+
I'm an instructor, why does Materia think I'm suddenly a student?
+
+

Materia defers to your LMS when receiving login information that may include your role in the course you last accessed Materia from. Depending on your course role, + your role in Materia may update to match. For example, if you are instructor in Course A but a student in Course B, Materia will flag you as a student if you visit + Materia content embedded in Course B. Visiting Materia content in Course A will once again grant you the author role.

+
+
Can my students author widgets?
+
+

Yes they can, but student-authored widgets have several limitations. Primarily, the widget is forced into Guest Mode, which removes the login requirement, but all scores + recorded by Guest Mode widgets are anonymous. Student-authored widgets cannot be embedded in your LMS, and if a student grants you access, you cannot disable Guest Mode. + Students can freely share their widgets with other users using the Play URL or Embed Code.

+
+
+

Scores & Grades

+
+
Does Materia save student grades?
+
+

Materia does not save grade information, but it does save student performance data. Student scores are stored and can be reviewed any time by + visiting the Student Activity section of a widget in My Widgets. When embedded in your LMS, Materia sends a score percentage to the LMS that's + then applied as a point value or grade by the LMS itself for an assignment.

+
+
How does scoring work?
+
+

By default, a student must authenticate to Materia - either automatically, when accessed through the LMS, or directly, by clicking the Login button - + so the system knows who they are and who to associate a score with. All score data for a widget is accessible under the Student Activity section in My Widgets. + Additionally, student performance data can be exported at any time by clicking the Export Options button in My Widgets.

+
+
My widget is embedded in the LMS but the gradebook did not update! What happened?
+
+

This can happen for multiple reasons. First, ensure the widget is properly embedded in your LMS by reviewing our documentation for embedding widgets in Canvas. + Next, verify the score the student recieved by reviewing the widget's Student Activity section in Materia under My Widgets. If a score is present in Materia but not synced with the gradebook, contact Support. Often the "handshake" between Materia and the LMS can + fail or be invalidated for several reasons that are not nefarious.

+
+
+

Widget Ownership

+
+
Can I give other instructors access to a widget?
+
+

Yes. Select Collaborate in My Widgets to share widgets with other users. You can search for any other Materia user in the search field, + provided they've interacted with Materia at least once in the past. You can grant other users one of two access levels: Full, which + effectively makes a user a co-owner, or View Scores, which allows a user to share and read score information related to a widget but they cannot edit it.

+
+
Can I make students co-owners of a widget?
+
+

You cannot share widgets with students unless they have been set to Guest Mode, under a widget's access settings. As a general rule, Materia will not + allow students ownership access to widgets unless the scores associated with the widgets are anonymized. Conversely, widgets authored by students are forced into Guest Mode, and changing a student widget + you co-own to Normal Access will remove the student as an owner.

+
+
I see a widget embedded in my course in the LMS, but I don't own it. What do I do?
+
+

Don't panic! Even if you don't own the widget, it will continue to function normally, and sync scores with the gradebook if configured to do so. If you're an author of the course, + you will be provided with a list of owners of the widget, and can select Request Access from any owner. The owner will receive a notification in Materia + and be provided with an option to add you as a collaborator. Note that this does not guarantee you will receive access! In cases where the original owner is no longer associated with your institution, feel free to + contact Support.

+
+
+

Miscellaneous

+
+
How do I activate Beard Mode?
+
+

What? We don't know what you're talking about.

+
+
+
+ + ) +} + +export default HelpForInstructors diff --git a/src/components/help-for-students.jsx b/src/components/help-for-students.jsx new file mode 100644 index 000000000..6420efaef --- /dev/null +++ b/src/components/help-for-students.jsx @@ -0,0 +1,65 @@ +import React from 'react'; + +const HelpForStudents = () => { + + return ( + <> +
+

For Students

+

+ Materia is an open-source educational platform hosted alongside your LMS to enhance course content with interactive tools + called widgets. If you run into a problem playing a widget or receiving a score, we're here to help. +

+
+
+

Get Support

+

If you need help beyond what has been provided here, please contact support using one of the following:

+
+
Support
+
http://website/support/
+
Email
+
support@website
+
Phone
+
PHONE NUMBER HERE
+
+
+
+

Common Questions & Issues

+
+
I'm not seeing a widget, only an error message. What do I do?
+
+

For one reason or a another Materia encountered a server issue or an issue authenticating you. Contact support using the info above.

+
+
I completed a widget, but my grade didn't update. What happened?
+
+

Widgets should automatically update the gradebook with your score when embedded correctly in an assignment. If a widget is embedded as a module item or directly in a regular course page, + the gradebook sync will not occur. Additionally, ensure you have advanced the widget all the way to the score screen, + which is when the play session is formally concluded. Leaving the play session early will prevent the play from being marked as complete.

+

If all items above check out, contact support. Support can verify the score and ensure your grade is properly updated.

+
+
How many times can I play a widget?
+
+

By default, widgets can be played as many times as you want. When embedded as assignments, your highest score is the one synced with the gradebook. If your instructor has set an attempt limit, + the additional attempt count will be displayed on the score screen alongside the Play Again button.

+
+
Can I see scores from widgets I've previously played in Materia?
+
+

You can! Log in to Materia directly, if you're not already authenticated. Then, visit your profile by clicking your name at the top right, or the + My Profile link the header. Your profile page will list your complete play history for every widget you've previously interacted with.

+
+
Can I make my own widget?
+
+

Students can make widgets, but there's one important limitation: the widget will be set to Guest Mode, which means it won't know who is playing it, and consequently, score + data will be anonymous.

+
+
What's the answer to life, the universe, and everything?
+
+

That's a really big question, but we're pretty sure the answer is 42.

+
+
+
+ + ) +} + +export default HelpForStudents diff --git a/src/components/help-home.jsx b/src/components/help-home.jsx new file mode 100644 index 000000000..60cc3f8a1 --- /dev/null +++ b/src/components/help-home.jsx @@ -0,0 +1,52 @@ +import React from 'react'; + +const HelpHome = () => { + + return ( + <> +
+ +

Having issues with Materia or don't know where to get started? We're here to help. For first-time users, get more information about Materia from the links below.

+

Player/Student Guide

+

Author/Instructor Guide

+
+
+

Requirements

+

Materia requires that you use an up-to-date browser with javascript and cookies enabled.

+
+ +
+

Login Issues

+

In many cases, problems logging in are a result of one of the following:

+ +

Incorrect Password

+

You may need to reset your password.

+ +

Expired Password

+

You may need to reset your password.

+ +

User Account Doesn't exist

+

Your user account may not have been created yet.

+
+ +
+

Support

+

If you need help beyond what has been provided here, please contact support using one of the following:

+
+
Support
+
http://website/support/
+
Email
+
support@website
+
Phone
+
PHONE NUMBER HERE
+
+
+
+ +

Our docs site has extensive documentation for students, authors, support users, and developers.

+
+ + ) +} + +export default HelpHome diff --git a/src/components/help-page.jsx b/src/components/help-page.jsx index de45170a7..412325eb7 100644 --- a/src/components/help-page.jsx +++ b/src/components/help-page.jsx @@ -1,58 +1,59 @@ -import React from 'react' +import React, { useState, useEffect } from 'react' import Header from './header' +import HelpHome from './help-home' +import HelpForStudents from './help-for-students' +import HelpForInstructors from './help-for-instructors' + import './help-page.scss'; const HelpPage = () => { + + const [page, setPage] = useState(window.location.hash.match(/#(home|students|instructors){1}$/)?.[1]) + + const listenToHashChange = () => { + const match = window.location.hash.match(/#(home|students|instructors){1}$/) + if (match != null && match[1] != null) setPage(match[1]) + else setPage('home') + } + + useEffect(() => { + window.addEventListener('hashchange', listenToHashChange) + + return () => { + window.removeEventListener('hashchange', listenToHashChange) + } + }, []) + + let helpContentRender = null + switch (page) { + case 'students': + helpContentRender = + break + case 'instructors': + helpContentRender = + break + default: + helpContentRender = + } + return ( <>

Help & Support

-
- -

Check out the Materia Quickstart Guide.

-
- -
-

Requirements

-

Materia requires that you use an up-to-date browser with javascript and cookies enabled.

-
- -
-

Login Issues

-

In many cases, problems logging in are a result of one of the following:

- -

Incorrect Password

-

You may need to reset your password.

- -

Expired Password

-

You may need to reset your password.

- -

User Account Doesn't exist

-

Your user account may not have been created yet.

-
- -
- -

View the docs for guides on using Materia.

- -

Player/Student Guide

-

Author/Instructor Guide

-
- -
-

Support

-

If you need help beyond what has been provided here, please contact support using one of the following:

-
-
Support
-
http://website/support/
-
Email
-
support@website
-
Phone
-
PHONE NUMBER HERE
-
+
+ +
+ {helpContentRender} +
diff --git a/src/components/help-page.scss b/src/components/help-page.scss index 83529ad15..a611dfb63 100644 --- a/src/components/help-page.scss +++ b/src/components/help-page.scss @@ -1,145 +1,179 @@ @import './include.scss'; -@media (max-width: 850px) { - .docs .container .page { - padding: 40px 20px 20px 20px !important; - margin: 15px 30px !important; - } - - .docs .container .page section.float.right { - float: none !important; - width: 100% !important; +.docs { + .container { + display: flex; + justify-content: center; + position: relative; + + font-family: 'Lato', arial, serif; + + .page { + z-index: 100; + max-width: 800px; + min-height: 400px; + margin: 15px 60px 60px 60px; + padding: 40px; + overflow: auto; + + border-radius: 4px; + border: #e4e4e4 1px solid; + + box-shadow: 1px 3px 10px #dcdcdc; + background-color: #fff; + + text-align: left; + font-size: 14px; + + .content { + display: flex; + align-items: stretch; + + nav { + flex-basis:30%; + min-width: 150px; + min-height: 100%; + margin-right: 20px; + + border-right: solid 0.5px #dcdcdc; + + ul { + margin: 0; + padding: 0; + + li { + display: block; + padding: 0.5em 0 0.3em 0; + margin-bottom: 0.5em; + + border-bottom: solid 0.5px #dcdcdc; + + a { + color: #0093e7; + text-decoration: none; + } + } + } + } + + main { + flex-grow: 1; + display: flex; + flex-direction: row; + align-items: flex-start; + flex-wrap: wrap; + + section { + margin-bottom: 0px; + padding-bottom: 15px; + + &.full-width { + flex-basis: 100%; + flex-grow: 2; + } + + &.half-width { + flex-basis: 45%; + flex-grow: 1; + margin-right: 2.5%; + } + } + } + } + } + + h1 { + margin: 0 0 30px 0; + padding: 0 0 20px 0; + + border-bottom: solid #dcdcdc .5px; + + font-weight: 700; + font-size: 38px; + } + + h2 { + margin: 20px 0 0 0; + + font-weight: 400; + font-size: 20px; + } + + h3 { + margin: 30px 0 0 0; + + font-size: 16px; + } + + h3 + p { + margin-top: 0.5em; + } + + a { + text-decoration: underline; + } + + span.bold { + font-weight: bold; + } + + span.italic { + font-style: italic; + } + + dl { + dt { + font-weight: bold; + font-size: 14px; + } + + dd { + margin: 0.5em 0 0 0; + padding-bottom: 10px; + } + } } - - .docs .container .page section.float.left { - width: 100% !important; - } - - .docs .container .page section.float.left { - margin-bottom: 20px !important; - } -} - -.docs .container { - display: flex; - justify-content: center; - // margin: 0 auto; - // width: 970px; - position: relative; - - font-family: 'Lato', arial, serif; -} - -.docs .container .page { - border-radius: 4px; - border: #e4e4e4 1px solid; - box-shadow: 1px 3px 10px #dcdcdc; - - margin: 15px 50px; - z-index: 100; - min-height: 400px; - text-align: left; - font-size: 14px; - - overflow: auto; - - width: 685px; - // background: url('/img/question_mark_circle.png') 780px 30px no-repeat; - - background-color: #fff; - margin-bottom: 60px; - - padding: 40px 215px 20px 60px; -} - -.docs .container h1 { - - font-weight: 700; - font-size: 38px; - padding: 0 0 5px 0; - padding-bottom: 20px; - margin: 0 0 30px 0; - border-bottom: solid #dcdcdc .5px; -} - -.docs .container h2 { - font-weight: 400; - font-size: 20px; - margin: 20px 0 0 0; } -.docs .container .page section { - margin-bottom: 0px; - padding-bottom: 15px; - clear: both; -} - -.docs .container .page section.float { - width: 25%; - clear: none; - float: left; -} - -.docs .container .page section.float.right { - width: 40%; - float: right; -} - -.docs .container .page section.float.left { - width: 53%; - float: left; -} - -.docs .container .page section.bordered { - border-bottom: solid #dcdcdc .5px -} - -.docs .container .page section.bordered-top { - border-top: solid #dcdcdc .5px -} +@media (max-width: 850px) { -.docs .container h3 { - margin: 30px 0 0 0; - font-size: 12px; + .docs { + .container { + .page { + padding: 40px 20px 20px 20px; + margin: 15px 30px; + } + } + } } -.docs .container h3 + p { - margin-top: 0.5em; -} +@media (max-width: 720px) { + .docs { + .container { + .page { + .content { + flex-direction: column; -.docs .container a { - text-decoration: underline; -} + nav { + flex-basis: 100%; + min-width: 100%; -.get_flash { - background: url('/img/get_flashplayer.gif'); - width: 160px; - display: block; - margin: 0 auto; - text-indent: -9999px; - background-repeat: no-repeat; - height: 41px; -} + border-right: none; -.get_flash:active { - background-position: 0 2px; -} + ul { + max-width: 90%; -.docs .container dl dt { - font-weight: bold; - font-size: 12px; -} -.docs .container dl dd { - padding-bottom: 10px; - margin: 0.5em 0 0 0; -} + li { + padding-left: 5%; + } + } + } -.docs .no_flash, -.docs .flash_installed { - background: #f7f7f7; - border-radius: 5px; - padding: 15px 20px; - text-align: center; - font-size: 15px; - color: #4a4a4a; + main { + flex-basis: 100%; + } + } + } + } + } } diff --git a/src/components/homepage.jsx b/src/components/homepage.jsx index 4d5e0b5ed..bc594b455 100644 --- a/src/components/homepage.jsx +++ b/src/components/homepage.jsx @@ -59,8 +59,8 @@ const Homepage = () => (

Engage Your Students

Re-imagine your course filled with diverse and interesting experiences. - It can bring life to content modules, practice, study activities, and even assessments. - Engage students with game mechanics like: story-telling, competition, instant feedback, and instant reward systems. + Materia can bring life to content modules, practice, study activities, and even assessments. + Engage students with game mechanics like story-telling, competition, instant feedback, and instant reward systems.

screen shot of a sort it out widget @@ -70,7 +70,7 @@ const Homepage = () => (

Integrate with Your Course

Materia integrates into Canvas seamlessly. - As an assignment, student's scores can automatically sync to the grade book. + As an assignment, students' scores can automatically sync to the grade book. Thanks to the magic of LTI, Students are logged in automatically!