olive-pathway
Version:
Olive learning pathway component - gamification
307 lines (276 loc) • 8.43 kB
Markdown
# Learning pathway components for react
## Reputation Point
```jsx
import React from "react";
import { ReputationPoint } from "olive-pathway";
import "olive-pathway/dist/olive-pathway.css";
function App() {
const activities = {
data: [
{
id: "6284ccad9ca1a52174fe3d34", // id that represents name
name: "Access Contents",
type: "Bundle",
},
{
id: "6284ccad9ca1a52174fe3d35",
name: "Start Online Course",
type: "Courses",
},
{
id: "6284ccad9ca1a52174fe3d36",
name: "Purchase B2C Course",
type: "Courses",
},
],
activityTypes: [
{
// labelKey and valueKey can be changed according to the data
labelKey: "label",
valueKey: "value",
type: "Courses",
data: [
{ label: "ABC Course", value: "6284ccad9ca1a52174fe3d41" },
{ label: "XYZ Course", value: "6284ccad9ca1a52174fe3d42" },
{ label: "123 Course", value: "6284ccad9ca1a52174fe3d43" },
],
},
{
// labelKey and valueKey can be changed according to the data
labelKey: "label",
valueKey: "value",
type: "Bundle",
data: [
{ label: "123 Bundle", value: "6284ccad9ca1a52174fe3d44" },
{ label: "456 Bundle", value: "6284ccad9ca1a52174fe3d45" },
{ label: "789 Bundle", value: "6284ccad9ca1a52174fe3d46" },
],
},
],
};
return (
<ReputationPoint
activities={activities}
token="your_auth_token"
apiurl="your_api_url"
/>
);
}
```
- While creating a reputation point if just activity type is selected without activity contents then the given point maps to all of the contents of that activity.
- If activity content also selected with the activity thye then the given point only maps the corresponding activity content of selected activity type.
- Multiple activities can be added inside single reputation point with **+ Add Activity**
- And multiple reputation points can be added with **+ Add Next**
</br>
</br>
</br>
## Badge
```jsx
import React from "react";
import { Badge } from "olive-pathway";
import "olive-pathway/dist/olive-pathway.css";
function App() {
const activities = {
badgeName: "Badge",
data: [
{
id: "6284ccad9ca1a52174fe3d34", // id that represents name
name: "Access Contents",
type: "Courses",
},
{
id: "6284ccad9ca1a52174fe3d35",
name: "Start Online Course",
type: "Courses",
},
{
id: "6284ccad9ca1a52174fe3d36",
name: "Login",
type: "Bundle",
},
{
id: "REPUTATION_POINT", // must be same and compulsory
name: "Reputation Point",
type: "REPUTATION_POINT",
},
{
id: "BADGE", // must be same
name: "Badge",
type: "BADGE",
},
{
id: "EVENT", // must be same
name: "Event",
type: "EVENT",
},
],
activityTypes: [
{
// labelKey and valueKey can be changed according to the data
labelKey: "label",
valueKey: "value",
type: "Courses",
data: [
{ label: "ABC Course", value: "6284ccad9ca1a52174fe3d41" },
{ label: "XYZ Course", value: "6284ccad9ca1a52174fe3d42" },
{ label: "123 Course", value: "6284ccad9ca1a52174fe3d43" },
],
},
{
// labelKey and valueKey can be changed according to the data
labelKey: "label",
valueKey: "value",
type: "Bundle",
data: [
{ label: "123 Bundle", value: "6284ccad9ca1a52174fe3d44" },
{ label: "456 Bundle", value: "6284ccad9ca1a52174fe3d45" },
{ label: "789 Bundle", value: "6284ccad9ca1a52174fe3d46" },
],
},
],
};
return (
<Badge
activities={activities}
token="your_auth_token"
apiurl="your_api_url"
/>
);
}
```
There are 3 (Diamond, Gold and Silver) badges available initially. If the requirement are different then the user can update those initial badges.
- While creating a badge **reputation point** is mandatory. If your software doesn't have the concept of reputation point then just input the values and ignore.
- If the user inputs 4 in **reputation point** then the 4 reputation point maps to the correspoding single badge.
- **Claim Manula** is for the manual claim of reputation point or other activities.
- If just activity type is selected without activity contents then the given badge quanity maps to all of the contents of that activity.
- If activity content also selected with the activity thye then the given badge quanity only maps the corresponding activity content of selected activity type.
- Quantity refers to the number of badges will be given once the rule/activitiy is fullfilled.
- Multiple activity type/contents can be added inside single activity with **+ Add Activity Type**
- And multiple activities can be added with **+ Add Next Activity**
- **_On sorting the hierarchy or deleting the badge, all of the activities of all of the badges will be cleared_**.
</br>
</br>
</br>
## Learning Pathway
```jsx
import React from "react";
import { Pathway } from "olive-pathway";
import "olive-pathway/dist/olive-pathway.css";
function App() {
const courses = {
// labelKey and valueKey can be changed according to the data
labelKey: "label",
valueKey: "value",
data: [
{
label: "course0",
value: "course0",
},
{
label: "course1",
value: "course1",
},
],
};
const vouchers = {
// labelKey and valueKey can be changed according to the data
labelKey: "title",
valueKey: "code",
data: [
{ title: "Voucher1", code: "12gddeg" },
{ title: "Voucher2", code: "45432fdgfs" },
],
};
const jobs = {
// labelKey and valueKey can be changed according to the data
labelKey: "positionTitle",
valueKey: "_id",
data: [
{ _id: "603f3958bf8fa1d223f1f1c9", positionTitle: "Node Developer" },
{ _id: "603f3958bf8fa1d223f1f110", positionTitle: "React Developer" },
],
};
const events = {
labelKey: "name",
valueKey: "_id",
data: [
{ _id: "603f3958bf8fa1d223f1f1d7", name: "IT Expo" },
{ _id: "603f3958bf8fa1d223f1f1e8", name: "Myconnect Product Launch" },
],
};
/* For Pathway Components */
const data = [
{
key: "C_S", // For Courses or similar data
data: courses,
component: {
name: "Course",
rules: ["isStarted", "isCompleted", "progress"],
},
},
{
key: "D_C", // For Document or similar data
component: { name: "Document", rules: ["isCompleted"] },
},
];
```
Not required to send 'data' on accolades and recommendations if the component has already that key and data.
```jsx
const options = {
closeOffCanvasOnEsc: false,
/* For Pathway Accolades such as Credit, Voucher Code, Course */
accolades: [
{
key: "C_R",
name: "Credit",
},
{
key: "V_C",
name: "Voucher Code",
data: vouchers,
},
{
key: "C_S",
name: "Course",
data: courses,
},
{
key: "BADGE",
name: "Badge",
},
],
/* For Pathway Recommendations such as Job, Course, Events */
recommendations: [
{
key: "J_B",
name: "Job",
data: jobs,
},
{
key: "E_V",
name: "Event",
data: events,
},
{
key: "C_S",
name: "Course",
data: courses,
},
],
};
return (
<Pathway
token="your_auth_token"
apiurl="your_api_url"
options={options}
data={data}
/>
);
}
```
Olive pathway package has exported the **usePathway** hook with **gotToTable** hook function which clears the store and returns back to the table.
```jsx
import { usePathway } from "olive-pathway";
---
const { gotToTable } = usePathway()
```