Assessment Card

Assessment display card

SaaSLMS

Overview

AssessmentCard displays assessment information in a card format. Supports multiple assessment types (quiz, exam, assignment, survey, practice), shows question count, time limits, passing scores, and maximum attempts. Tracks attempt history with best score and pass/fail status, and handles availability windows for scheduled assessments.

Usage

import { AssessmentCard } from "@leanicon/web-builder-library/saas";

<AssessmentCard
  assessment={assessment}
  attemptCount={2}
  bestScore={85}
  lastAttemptStatus="passed"
  onStart={() => startAssessment(assessment.id)}
  onViewHistory={() => viewHistory(assessment.id)}
/>;

Variants

Default

Quiz

React Fundamentals Quiz

10 questions15 minPass: 70%0/3 attempts

With Attempts (Failed)

Quiz

React Fundamentals Quiz

10 questions15 minPass: 70%1/3 attempts

Best score: 65%

Passed

Quiz

React Fundamentals Quiz

10 questions15 minPass: 70%2/3 attempts

Best score: 85%Passed

Max Attempts Reached

Quiz

React Fundamentals Quiz

10 questions15 minPass: 70%3/3 attempts

Best score: 60%

Exam Type

Exam

Final Examination

50 questions120 minPass: 75%0/1 attempts

Assignment Type

Assignment

Project Submission

3 questionsPass: 70%0/3 attempts

Dark

Quiz

React Fundamentals Quiz

10 questions15 minPass: 70%0/3 attempts

Survey Type (code only)

<AssessmentCard
  assessment={{
    id: "assess-4",
    title: "Course Feedback Survey",
    type: "SURVEY",
    status: "PUBLISHED",
    questionCount: 15,
    passingScore: 0,
  }}
  onStart={() => startSurvey("assess-4")}
/>

Practice Type (code only)

<AssessmentCard
  assessment={{
    id: "assess-5",
    title: "Practice Questions",
    type: "PRACTICE",
    status: "PUBLISHED",
    questionCount: 10,
    timeLimitMinutes: 15,
    passingScore: 70,
  }}
  onStart={() => startPractice("assess-5")}
/>