SDK Integration
Install the Chatbot SDK in EXAM mode to show grading results to learners
Feedback produced by the grading API is shown to learners through the Chatbot SDK.
Installation is the same as Chatbot Installation. Adding just one thing — chat-mode="EXAM" opens the feedback experience instead.
What differs from a standard install
| Item | Standard learning | Exam feedback |
|---|---|---|
| Installation | CDN or npm | Same |
| Required values | apiKey, userId, courseId | Same (+ clipId pointing at the question) |
| chat-mode | Not set | "EXAM" required |
| First screen | Learning home (streak, quiz, study notes) | Feedback home (explanations, hints, weakness report) |
| Video sync | videoTarget syncs the lecture video | Not used |
Omitting chat-mode still installs successfully — it just opens the standard learning screen, so no feedback appears.
If the symptom is "it installed but I see no feedback", check this value first.
Matching the values
The three values you pass to the SDK must be exactly the same as the ones used in the grading request. That combination is what locates the feedback.
| Feedback API field | CDN attribute | npm option | Value |
|---|---|---|---|
| exam_id | course-id | courseId | Exam ID |
| items[].problem_id | clip-id | clipId | Problem ID of the question the learner is currently viewing |
| user_id | user-id | userId | Test taker ID |
If any value differs, or that question has not reached DONE yet, the feedback screen appears empty.
Installation
CDN (HTML)
<!DOCTYPE html>
<html>
<body>
<!-- 1. Load from CDN -->
<script src="https://files.edutap.ai/tap-sdk/loader.js"></script>
<!-- 2. Add the TapKit element with chat-mode="EXAM" -->
<tap-kit
chat-mode="EXAM"
user-id="u-1001"
course-id="I100000760_1"
clip-id="w11"
></tap-kit>
<!-- 3. Inject the API key -->
<script>
document.querySelector('tap-kit').apiKey = 'your-api-key';
</script>
</body>
</html>Set the API key as a property only, never as an api-key attribute — an attribute exposes it in the HTML.
npm (React)
npm install @coxwave/tap-kit@^4.3.3'use client';
import { TapKit, useTapKit } from '@coxwave/tap-kit/react';
function ExamReviewPanel({ examId, problemId, userId }) {
const tapkit = useTapKit({
apiKey: 'your-api-key',
chatMode: 'EXAM', // open the feedback experience
userId, // user_id from the grading request
courseId: examId, // exam_id from the grading request
clipId: problemId, // problem_id from the grading request
onReady: () => console.log('Ready!'),
});
return <TapKit control={tapkit.control} style={{ height: '600px' }} />;
}The chatMode option reaches the element from @coxwave/tap-kit 4.3.3 onward.
4.3.2 and earlier silently ignore it and open the standard learning screen, so upgrade.
The CDN path is unaffected — its loader always fetches the latest SDK.
npm (Non-React)
import { createTapKit } from '@coxwave/tap-kit';
const tapkit = createTapKit({
apiKey: 'your-api-key',
chatMode: 'EXAM',
userId: 'u-1001',
courseId: 'I100000760_1',
clipId: 'w11',
});
tapkit.mount();
await tapkit.ready;Moving between questions
When the learner moves to another question, update only the problem ID. Leave chat-mode as it is.
// CDN / Non-React
document.querySelector('tap-kit').clipId = 'w12';// React — passing it as state applies automatically
const [problemId, setProblemId] = useState('w11');
const tapkit = useTapKit({ /* ... */ chatMode: 'EXAM', clipId: problemId });Screens in EXAM mode
| Screen | Contents |
|---|---|
| Home | Explanation and hint buttons, plus AI-suggested questions |
| Chat | Conversation that keeps the current question's feedback context |
| Weakness report | Weaknesses per attempt with cumulative counts |
Quizzes, study notes, chat history, and settings do not exist in this mode.
Requesting feature activation
chat-mode="EXAM" alone does not open the feedback screen — exam feedback must be enabled on your API key. It is off by default, so ask your contact to turn it on.
Integration checklist
| Check | How to verify |
|---|---|
| Is the SDK loaded? | Confirm the loader.js request returns 200 |
| Did it open in EXAM mode? | Confirm the home screen shows explanation and hint buttons |
| Do the values match? | Confirm course-id / clip-id / user-id equal the grading request values |
| Is grading finished? | Confirm the question's status is DONE via the result lookup API |