Skip to main content

Exam Picker

Renders an interface that allows users to pick an exam. Optionally allows a user to create new exams and modify existing exams.

Preview​

Untitled

Launch Options​

launchOptions.examBuilder​

Sample Configuration:

{
  "allowItemCreation": true,
  "allowItemCustomization": true,
  "enablePassagePicker": true,
  "guidedBuilder": {
    "show": true
  },
  "activitySettings": {
    "show": true,
    "fields": {
      "title": {
        "show": true
      },
      "subject": {
        "show": true
      },
      "grade": {
        "show": true
      },
      "language": {
        "show": true
      },
      "maturity": {
        "show": true
      }
    }
  },
  "itemPicker": {
    "filters": {
      "language": {
        "show": true
      },
      "subject": {
        "show": true
      },
      "grade": {
        "show": false
      },
      "unit": {
        "show": false
      },
      "course": {
        "show": false
      },
      "objective": {
        "show": true
      },
      "interaction": {
        "show": true
      },
      "blooms": {
        "show": true
      },
      "dok": {
        "show": true
      }
    }
  }
}

Events​

ParameterTypeDescription
onSelect

Features​

Create Exams​

Users can create new exams from within the exam builder interface, and then select the created exam as part of the picker UI.

Modify Existing Exams​

Users can modify existing exams by selecting an exam, and then clicking the Pencil icon to launch the exam editor.

Untitled Untitled

Attach Tags to Exam on Create​

You may request content tags be applied to exams (or any content) created in this component by passing createWithTags to launchOptions:

{
  "createWithTags": [
    {
      "key": "school-id",
      "type": "string",
      "value": "123"
    }
  ]
}

Filter Visible Search Results​

You may request that the component only return content (items) that match a specific tag by adding contentFilter to launchOptions:

{
  "createWithTags": [
    {
      "key": "school-id",
      "type": "string",
      "value": "123"
    }
  ],
  "contentFilter": {
    "tags": {
      "include": [
        {
          "key": "school-id",
          "type": "string",
          "value": "123"
        }
      ]
    }
  }
}

Note:

  • Filtering by multiple tags values produces exclusive (and-style), not inclusive (or-style) results.

Launch using SDK​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My First Campfire Application</title>
  </head>

  <body>
    <div id="app">
      <!-- Where the UI will load -->
      <iframe id="tool" name="tool"></iframe>
    </div>

    <script>
      // Step 1: Gather user data (from your server)
      const user = {
        email: "john.deaux@example.com",
        firstName: "Jonathon"
        lastName: "Deaux",
        roles: "Instructor"
      }
      const APP_ID = "THE_DISTRICT_APP_KEY"

      // Step 2: Instantiate
      const service = new window.CampfireSDK.ExamPicker({
        id: "[item-id]",
        params: {
          oauth_consumer_key: APP_ID,
          resource_link_id: "0",
          user_id: user.email,
          lis_person_contact_email_primary: user.email,
          lis_person_name_given: user.firstName,
          lis_person_name_family: user.lastName,
          lis_person_name_full: `${user.firstName} ${user.lastName}`,
          roles: user.roles
        },
        launch_options: {
          examSessionId: "[exam-session-id]"
        },
        signingFunction: /* ... */
      });

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