Mathew activity solver

Appearance

Getting started ​

Installation ​

bash
npm i @adaptical/mathew-activity-solver

CDN ​

Using Vue from a CDN

We use import maps to load the activity solver and Vue from a CDN and be able to use import statements in our code.

javascript
<script type="importmap">
    {
        "imports": {
            "@adaptical/mathew-activity-solver": "https://unpkg.com/@adaptical/mathew-activity-solver",
            "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        }
    }
</script>

Starting the activity-solver ​

html
<html>
    <body>
        <div id="app"></div>
    </body>
</html>
javascript
import { startActivitySolver } from '@adaptical/mathew-activity-solver'
import '@adaptical/mathew-activity-solver/style.css'

const activitySolverRoot = document.querySelector('#app')

const apiKey = '<your-mathew-api-key>'
const userId = '<current-user-id>'
const method = 'HMAC-SHA256' // 'HMAC-SHA512' | 'HMAC-SHA384' | 'HMAC-SHA256'
const userIdHmac = await getUserIdHmac(userId) // Create this user id HMAC in your backend using your api secret

const apiAuth = { method, apiKey, userId, userIdHmac }

const activitySolverOptions = {
    api: { auth: apiAuth },
    exercises: [
        {
            exercise: {
                question: 'Question 1',
                answerType: 'SINGLE_CHOICE',
                answerOptions: ['Option 1', 'Option 2', 'Option 3', 'Option 4'],
            },
            userAnswer: null,
        },
    ],
}

startActivitySolver(activitySolverRoot, activitySolverOptions)

Starting a new autonomous practice ​

html
<html>
    <body>
        <div id="app"></div>
    </body>
</html>
javascript
import { startPractice } from '@adaptical/mathew-activity-solver'
import '@adaptical/mathew-activity-solver/style.css'

const activitySolverRootElement = document.querySelector('#app')

const apiKey = '<your-mathew-api-key>'
const userId = '<current-user-id>'
const method = 'HMAC-SHA256' // 'HMAC-SHA512' | 'HMAC-SHA384' | 'HMAC-SHA256'
const userIdHmac = await getUserIdHmac(userId) // Create this user id HMAC in your backend using your api secret

const apiAuth = { method, apiKey, userId, userIdHmac }

const autonomousPracticeOptions = {
    api: {
        apiAuth,
    },
    content: { book: { isbn: '<book-isbn>', section: '<book_section>' } },
}

const activity = await startPractice(activitySolverRootElement, autonomousPracticeOptions)

// You can save the activity id here to retrieve the activity later

Retrieving an autonomous practice ​

html
<html>
    <body>
        <div id="app"></div>
    </body>
</html>
javascript
import { retrievePractice } from '@adaptical/mathew-activity-solver'
import '@adaptical/mathew-activity-solver/style.css'

const activitySolverRootElement = document.querySelector('#app')

const apiKey = '<your-mathew-api-key>'
const userId = '<current-user-id>'
const method = 'HMAC-SHA256' // 'HMAC-SHA512' | 'HMAC-SHA384' | 'HMAC-SHA256'
const userIdHmac = await getUserIdHmac(userId) // Create this user id HMAC in your backend using your api secret

const apiAuth = { method, apiKey, userId, userIdHmac }

const autonomousPracticeOptions = {
    api: {
        apiAuth,
    },
    activityId: '<activity-id>',
}

await startPractice(activitySolverRootElement, autonomousPracticeOptions)