Skip to main content

Assessment Player

Overview​

Displays either an interface for students to complete an assessment, or an interface that allows instructors to see results of the assessment.

Assessment Player

Additional Parameters​

{
	id: string; // exam-config id
	preview?: boolean;
}

The campfire assessment player will either launch a student exam player, or a screen containing the exam results, depending on the value of params.roles (either Learner or Instructor).

Since v0.12.0: Pass preview: true to preview an assessment without the need to create an exam-session . Must also pass role of Instructor .

📅 Events​

LAUNCHED

Emitted immediately after the Campfire application finished loading.

EXAM_SESSION_STARTED

If the Assessment Player is launched as a Learner, this event will be emitted when the exam session start. Currently, the exam session starts as soon as the iframe loads, so the event will be emitted immediately as well.

EXAM_SESSION_SUBMITTED

If the Assessment Player is launched as a Learner, this event will be emitted when the exam session is submitted. Once received, you may use the examSessionId to fetch the student exam score via the API.

data: {
  examConfigId: string;
  examSessionId: string;
}

☎️ Messages​

None

🚀 Quick Start Example​

<!DOCTYPE html>
<html>
  <head>
    <title>Campfire SDK Samples</title>
    <link rel="stylesheet"
      href="https://unpkg.com/modern-normalize@2.0.0/modern-normalize.css" />
    <script
      src="https://unpkg.com/@campfirelearning/sdk-lti@0.6.1/dist/browser/index.js"></script>
    <script
      src="https://unpkg.com/@campfirelearning/sdk-lti-oauth@0.0.2/dist/browser/index.js"></script>
    <style type="text/css">
      body, html {
        height: 100%;
      }
      iframe {
        width: 100%;
        height: 90vh;
        border: none;
        flex: 1;
        min-height: 0;
      }
      div#app {
        padding: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
      }
      div#app > h1 {
        padding: 1rem;
        margin: 0;
        font-size: 1rem;
        border-bottom: solid 1px #999;
      }
      div#pad {
        padding: 1rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1>&#128293; <a href=".">Campfire SDK Samples</a></h1>
      <div id="pad">
        <iframe id="tool" name="tool"></iframe>
      </div>
    </div>
    <script>
      const consumer = new CampfireSDK.CampfireAssessmentPlayer({
        id: "80390a0a-a90d-4471-9c22-bd806268cc82", // the exam-config ID
        params: {
          oauth_consumer_key: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
          user_id: "s-123", // the student ID
          resource_link_id: "0",
          context_id: "1",
          lis_person_name_given: "Johnny",
          lis_person_name_family: "Appleseed",
          lis_person_name_full: `Johnny Appleseed`,
          lis_outcome_service_url: "https://examspark.dev/my-webhook?format=json",
	        lis_result_sourcedid: "student1-gradebook-cell-123"
          roles: [
            "Learner",
            "urn:lti:instrole:ims/lis/Student",
          ],
        },
        signingFunction: (url) => CampfireOAuth.getUnsafeOauthSigningFunction({
          launchUrl: url,
          secretKey: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
        }),
      });

      consumer.addEventListener("message", (message) => {
        console.log("Message received", message.data)
      })

      consumer.mount("tool").then(() => {
        console.log("Mounted!");
      });
  </script>
  </body>
</html>

Webook Payload Sample​

Each time your exam-session is scored on our end, we will send this payload to the URL specified in the launch parameter lis_outcome_service_url. The value of lis_result_sourcedid should correspond to an gradebook cell identifier (that you maintain on your servers). Both parameters are required to receive these webhook subscriptions. Below is a sample payload. Ensure you are sending ?format=json in the lis_outcome_service_url to receive this format, otherwise you will receive an XML format meant for Learning Management Systems.

~~{
  examSession: {
    id: 'b1207671-709b-550b-a559-0291a4ed46d3',
    sk: 'exam-session',
    scoreMin: 0,
    scoreActual: 25,
    scoreMax: 100,
    schemaVersion: '2020-01-01',
    examConfigId: '17bf8d5c-4d9b-4123-9104-480b8e1eae18',
    sourcedId: '123'
  }
}~~

As of October 2, 2024 5:39 PM (EDT)

Raw and percentage points are now available.

{
  "examSession": {
    "examConfigId": "a2f2a294-fbfe-4f54-90c1-d31c8844c13c",
    "examSessionResults": {
      "points": {
        "actual": 3,
        "isScorable": true,
        "max": 4,
        "min": 0
      }
    },
    "id": "28506449-44ef-5bee-bf5f-0fc5a1504dc9",
    "schemaVersion": "2020-01-01",
    "scoreActual": 75,
    "scoreMax": 100,
    "scoreMin": 0,
    "sk": "exam-session",
    "sourcedId": "student1-gradebook-cell-123"
  }
}