Sock

Sock is a React-based assessment builder designed for developers. It allows users to create customizable assessments using a standardized JSON schema, supporting various question types and enabling integration into applications like Learning Management Systems (LMS), dashboards, personality assessments (e.g., Myers-Briggs), and more.

Table of Contents

• Features
• Project Structure
• Getting Started
  • Prerequisites
  • Installation
  • Running the Project
• Usage
• Development
• Testing
• Contributing
• License

Features

• Assessment definition via JSON schema
• Support for multiple question types (currently Binary, Multiple Choice, and Open-Ended)
• React-based components for rendering assessments
• Hooks for managing assessment state and lifecycle
• Progress tracking and navigation
• Tailwind CSS integration for styling
• Progress saving using localStorage
• Responsive and accessible design

Project Structure

The project is organized into multiple packages:

• packages/core: Contains the core assessment logic
• packages/sock-react: React components and hooks for rendering assessments

Getting Started

Prerequisites

• Deno
• Node.js and npm (for running React tests)

Installation

1. Clone the repository:

   git clone https://github.com/your-username/sock.git
   cd sock
   
   

2. Install dependencies:

   deno cache packages/core/mod.ts
   npm install
   
   

Running the Project

To start the development server:

deno task start

This will run the server and build the client-side JavaScript.

Usage

To use Sock in your React application:

import React from "react";
import { AssessmentBuilder } from "sock-react";

const schema = {
  sections: [
    {
      questions: [
        {
          id: "q1",
          type: "binary",
          prompt: "Is this a sample question?",
          options: ["Yes", "No"],
        },
        {
          id: "q2",
          type: "multipleChoice",
          prompt: "Which option do you prefer?",
          options: ["Option A", "Option B", "Option C"],
        },
        {
          id: "q3",
          type: "openEnded",
          prompt: "Please provide your thoughts on this topic:",
        },
        // Add more questions here
      ],
    },
  ],
};

export function App() {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-4">My Assessment</h1>
      <AssessmentBuilder
        schema={schema}
        onStart={() => console.log("Assessment started")}
        onComplete={(responses) =>
          console.log("Assessment completed:", responses)}
        onScore={(score) => console.log("Assessment scored:", score)}
        onMetrics={(metrics) => console.log("Assessment metrics:", metrics)}
      />
    </div>
  );
}

Development

The project uses Deno for the core package and Node.js for React components. To work on the project:

1. Make changes in the respective packages.
2. Run tests to ensure everything is working correctly.
3. Use the development server to see changes in real-time.

Testing

To run tests for the core package:

cd packages/core
deno test

To run tests for the React components:

cd packages/sock-react
npm test

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. If you encounter any issues or have suggestions, please open an issue in the repository.

License

This project is licensed under the MIT License. See the LICENSE file for details.