Skip to main content

Item Viewer

Renders a single assessment item. Can optionally show a student's response when provided an examSessionId.

Preview​

Untitled

Parameters​

ParameterTypeDescription
idstringThe id of the assessment item.
examSessionIdstringPass this value to display the student's response in this item.

Features​

Reveal Key​

User's can interact with the item, as well as reveal the key, and reset any responses in the viewer.

Show Student Responses from Exam​

Passing an examSessionId as a launch_option will cause the item viewer to pre-fill the studen't response into the assessment item. The item becomes non-interactive when displaying a student's response.

Untitled

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.ItemViewer({
      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>