Moved a directory, changed some filenames
This commit is contained in:
parent
ae27a60bcf
commit
347706835e
195 changed files with 696 additions and 255 deletions
144
AuditGlue/System alternative/SurveyJS.md
Normal file
144
AuditGlue/System alternative/SurveyJS.md
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
---
|
||||
tags:
|
||||
- iso27DIY
|
||||
- stack
|
||||
- dev
|
||||
---
|
||||
With an open source library, I’d recommend **SurveyJS** as your best option. Here’s why it fits your requirements perfectly:
|
||||
|
||||
## SurveyJS - Best Choice for Your Use Case
|
||||
|
||||
SurveyJS is a free and open-source MIT-licensed JavaScript library that renders dynamic JSON-based forms with integration for React, Angular, Vue, jQuery, and Knockout, storing all data on your own servers with no limits on forms or submissions .
|
||||
|
||||
### Key Advantages for Your Requirements:
|
||||
|
||||
**1. Dynamic Question Generation**
|
||||
|
||||
```javascript
|
||||
// Generate questions dynamically with LLM content
|
||||
const surveyJson = {
|
||||
pages: [{
|
||||
elements: [{
|
||||
type: "radiogroup",
|
||||
name: "challenge",
|
||||
title: await generateQuestionWithLLM(userContext),
|
||||
choices: await getLLMGeneratedOptions(orgData)
|
||||
}]
|
||||
}]
|
||||
};
|
||||
```
|
||||
|
||||
**2. Advanced Conditional Logic**
|
||||
|
||||
```javascript
|
||||
{
|
||||
type: "text",
|
||||
name: "followup",
|
||||
title: "Tell us more about {challenge}",
|
||||
visibleIf: "{challenge} = 'specific_option'",
|
||||
// Can reference user data too
|
||||
enableIf: "isUserRole('manager')"
|
||||
}
|
||||
```
|
||||
|
||||
**3. Supabase Integration**
|
||||
|
||||
```javascript
|
||||
survey.onComplete.add(async (result) => {
|
||||
await supabase.from('responses').insert({
|
||||
user_id: userId,
|
||||
survey_data: result.data,
|
||||
completed_at: new Date()
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
**4. Personalization Support**
|
||||
|
||||
```javascript
|
||||
// Inject user/org data into questions
|
||||
survey.setValue("userName", user.name);
|
||||
survey.setValue("orgSize", organization.size);
|
||||
|
||||
// Use in question text: "Given that {orgSize}, how would you..."
|
||||
```
|
||||
|
||||
## Alternative: Formbricks
|
||||
|
||||
Formbricks is an open source surveying platform built with React, Next.js, TypeScript, and TailwindCSS that provides comprehensive logic capabilities . However, it’s more of a complete platform than a library you embed.
|
||||
|
||||
## Implementation Strategy with SurveyJS
|
||||
|
||||
```javascript
|
||||
import { Survey } from 'survey-react-ui';
|
||||
import { Model } from 'survey-core';
|
||||
|
||||
class DynamicSurvey {
|
||||
async generateSurvey(userId, orgId) {
|
||||
// 1. Fetch user/org context from Supabase
|
||||
const context = await this.getContext(userId, orgId);
|
||||
|
||||
// 2. Generate base questions with LLM
|
||||
const baseQuestions = await this.generateWithLLM(context);
|
||||
|
||||
// 3. Build survey JSON with conditional logic
|
||||
const surveyJson = {
|
||||
pages: [{
|
||||
elements: baseQuestions.map(q => ({
|
||||
...q,
|
||||
title: this.interpolateVariables(q.title, context)
|
||||
}))
|
||||
}]
|
||||
};
|
||||
|
||||
return new Model(surveyJson);
|
||||
}
|
||||
|
||||
setupDynamicBehavior(survey, context) {
|
||||
// Add dynamic question injection based on answers
|
||||
survey.onValueChanged.add(async (sender, options) => {
|
||||
if (options.name === 'trigger_question') {
|
||||
const followup = await this.generateFollowup(
|
||||
options.value,
|
||||
context
|
||||
);
|
||||
sender.addNewPage(followup);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Why SurveyJS Over Custom Solution
|
||||
|
||||
- **Rich question types**: 20+ built-in components
|
||||
- **Mature conditional logic**: Complex expressions and branching
|
||||
- **Extensible**: Custom question types and themes
|
||||
- **Well-documented**: Extensive examples and API docs
|
||||
- **Active development**: Regular updates and community support
|
||||
- **Performance**: Optimized rendering and state management
|
||||
|
||||
## Database Schema Integration
|
||||
|
||||
```sql
|
||||
-- Store dynamic survey templates
|
||||
CREATE TABLE survey_templates (
|
||||
id uuid PRIMARY KEY,
|
||||
name text,
|
||||
base_schema jsonb,
|
||||
llm_prompts jsonb,
|
||||
created_by uuid REFERENCES users(id)
|
||||
);
|
||||
|
||||
-- Store completed responses
|
||||
CREATE TABLE survey_responses (
|
||||
id uuid PRIMARY KEY,
|
||||
user_id uuid REFERENCES users(id),
|
||||
template_id uuid REFERENCES survey_templates(id),
|
||||
responses jsonb,
|
||||
context_data jsonb,
|
||||
completed_at timestamp
|
||||
);
|
||||
```
|
||||
|
||||
SurveyJS gives you the flexibility to build exactly what you need while handling the complex UI logic, validation, and state management that would take months to build from scratch.
|
||||
|
|
@ -54,6 +54,6 @@ tags:
|
|||
[Application architecture](System%20alternative/Application%20architecture.md)
|
||||
[iso27DYI architecture with LLM](System%20alternative/iso27DYI%20architecture%20with%20LLM.md)
|
||||
[iso27DIY stack deployment](System%20alternative/iso27DIY%20stack%20deployment.md)
|
||||
[SurveyJS](../Corpus/Standards/SurveyJS.md)
|
||||
[SurveyJS](System%20alternative/SurveyJS.md)
|
||||
[WeWeb Security Pre-Launch Checklist](../Corpus/ISMS/Policy%20examples/WeWeb%20Security%20Pre-Launch%20Checklist.md)
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue