Skip to content

Commit

Permalink
Merge pull request #51 from roundtableAI/link-updates
Browse files Browse the repository at this point in the history
  • Loading branch information
timshell authored Aug 30, 2024
2 parents 557e90b + 710418d commit c752b33
Show file tree
Hide file tree
Showing 9 changed files with 431 additions and 263 deletions.
16 changes: 10 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,15 @@ RoundtableJS is an open-source JavaScript library for building complex surveys,

Here are some example surveys built with RoundtableJS. All code is in the [examples/studies](examples/studies) directory.

- [Customer Feedback Survey](https://roundtable.ai/survey/bb1f6ebf6e9c99c938df3fa74e9943d5356bb2a1)
- [Product Market Fit Survey](https://roundtable.ai/survey/0752ffcf82a327b05abe4484f1e6f8e65a200355)
- [Book a Demo Form](https://roundtable.ai/survey/1f67699733d860e486f508f593edfcb4ba4f9159)
- [Enterprise Market Research Survey](https://roundtable.ai/survey/9593255a3aa7231051e75e578747eaea2fde17b3)
- [Data Annotation Task](https://roundtable.ai/survey/c09e45719a21e7a23565097b60d48532c8e384e9)
- [Element showcase](https://roundtable.ai/survey/3e76ab92512f398e366baffd772b06cf972c0c0e)
- [Enterprise market research survey](https://roundtable.ai/survey/3020c264e57a0415889a7d82330af66daf30db15)
- [Simple NPS with branding](https://roundtable.ai/survey/bed16082755fc02b70f582c1fe143b8e7d292a43)
- [Typeform survey](https://roundtable.ai/survey/134a2317bb595d7768194de65772f97dc760b60b)
- [Product market fit survey](https://roundtable.ai/survey/765c87578ccf7e24522e91c44cf41f845c4bcd0e)
- [Book a demo form](https://roundtable.ai/survey/374fd1f3f1719d69b21438cbacd7013d28b7daeb)
- [Data annotation task](https://roundtable.ai/survey/1518e8ae74e9075349b07ffeee8ee21166477e4d)
- [RLHF data collection](https://roundtable.ai/survey/89eeb07064400b58f2d3a3d979b0cff729f1ee2b)


## 🚀 Quick Start

Expand Down Expand Up @@ -93,7 +97,7 @@ Here are some example surveys built with RoundtableJS. All code is in the [examp

```javascript
import Survey from 'roundtable-js/core/survey.js';
import SingleSelect from 'roundtable-js/question_types/singleSelect.js';
import SingleSelect from 'roundtable-js/elements/singleSelect.js';
```

For CDN installation, ensure the script is loaded and use the global `RoundtableJS` object:
Expand Down
165 changes: 55 additions & 110 deletions examples/studies/book-a-demo.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import Survey from '../../library/core/survey.js';
import HTML from '../../library/elements/HTML.js';
import TextInput from '../../library/elements/textInput.js';
import HTML from '../../library/elements/HTML.js';
import OpenEnd from '../../library/elements/openEnd.js';
import PageHTML from '../../library/plugins/pageHTML.js';

async function runSurvey() {
const survey = new Survey({
Expand All @@ -20,27 +21,26 @@ async function runSurvey() {
'&:hover': {
backgroundColor: '#333333',
}
},
question: {
fontWeight: 'normal',
},
label: {
fontWeight: 'normal',
fontSize: '16px',
},
finishMessage: {
color: 'black',
position: 'relative',
paddingBottom: '30px',
}
}
});

const logo = new HTML({
const logo = new PageHTML({
id: 'logo',
content: '<img src="https://roundtable.ai/images/logo-with-text.svg" alt="Roundtable Logo" style="display: block; margin: 0 auto; max-width: 190px; margin-bottom: 20px;">'
content: '<img src="https://roundtable.ai/images/logo-with-text.svg" alt="Roundtable Logo">',
position: 'top',
styles: {
root: {
display: 'block',
margin: '0 auto',
maxWidth: '190px',
marginBottom: '20px'
}
}
});

survey.addPlugin(logo);

const subtitle = new HTML({
id: 'subtitle',
content: '<p style="text-align: center; color: #666; margin-top: -10px;">Please fill out this form and a member of our sales team will contact you.</p>'
Expand All @@ -51,154 +51,99 @@ async function runSurvey() {
text: 'Email',
required: true,
placeholder: 'Your email',
styles: {
label: {
fontWeight: 'normal',
fontSize: '16px',
}
}
});

const name = new TextInput({
id: 'name',
text: 'Name',
required: true,
placeholder: 'Your name',
styles: {
label: {
fontWeight: 'normal',
fontSize: '16px',
}
}
});

const company = new TextInput({
id: 'company',
text: 'Company',
required: true,
placeholder: 'Your company name',
styles: {
label: {
fontWeight: 'normal',
fontSize: '16px',
}
}
});

const role = new TextInput({
id: 'role',
text: 'Role',
required: true,
placeholder: 'Your role',
styles: {
label: {
fontWeight: 'normal',
fontSize: '16px',
}
}
});

const participantVolume = new TextInput({
id: 'participantVolume',
text: 'What is your average participant volume per month?',
required: true,
placeholder: 'Average participant volume',
styles: {
label: {
fontWeight: 'normal',
fontSize: '16px',
}
}
});

const businessType = new TextInput({
id: 'businessType',
text: 'What % B2B vs B2C?',
required: true,
placeholder: 'Your answer',
styles: {
label: {
fontWeight: 'normal',
fontSize: '16px',
}
}
});

const hearAboutUs = new TextInput({
id: 'hearAboutUs',
text: 'How did you hear about us?',
required: false,
placeholder: 'Optional',
styles: {
label: {
fontWeight: 'normal',
fontSize: '16px',
}
}
});

const additionalComments = new OpenEnd({
id: 'additionalComments',
text: 'Additional comments',
required: false,
placeholder: 'Optional',
styles: {
label: {
fontWeight: 'normal',
fontSize: '16px',
}
}
});

const builtWith = new HTML({
id: 'builtWith',
content: '<div>Built with <a href="https://docs.roundtable.ai/rjs/introduction" target="_blank">RoundtableJS</a></div>',
styles: {
root: {
position: 'absolute',
bottom: '10px',
margin: '0',
fontSize: '14px',
right: '15px',
padding: '0px',
textAlign: 'right',
'& a': {
color: 'black'
},
'@media (max-width: 650px)': {
right: '10px',
bottom: '-5px',
}
}
}
});
const builtWith = new PageHTML({
id: 'builtWith',
content: '<div>Built with <a href="https://docs.roundtable.ai/rjs/introduction" target="_blank" style="color: black;">RoundtableJS</a></div>',
position: 'bottom',
styles: {
root: {
position: 'absolute',
bottom: '49px',
right: '25px',
fontSize: '14px',
padding: '0px',
textAlign: 'right',
}
}
});

await survey.showPage({
id: 'demoForm',
elements: [
logo,
subtitle,
email,
name,
company,
role,
participantVolume,
businessType,
hearAboutUs,
additionalComments,
builtWith
]
});
survey.addPlugin(builtWith);

await survey.showPage({
id: 'demoForm',
elements: [
subtitle,
email,
name,
company,
role,
participantVolume,
businessType,
hearAboutUs,
additionalComments,
]
});

survey.removePlugin(builtWith);

survey.finishSurvey(`
<img src="https://roundtable.ai/images/logo-with-text.svg" alt="Roundtable Logo" style="display: block; margin: 0 auto; max-width: 200px; margin-bottom: 20px;">
<h2 style="text-align: center; color: black; font-weight: 400 !important;">Thank you for your interest</h2>
<p style="text-align: center; color: #666666 !important; font-weight: 400 !important; margin-top: -10px;">A member of our sales team will contact you shortly.</p>
<div style="text-align: center; margin-top: 30px; margin-bottom: 10px">
<a href="https://www.roundtable.ai" style="background-color: black; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; font-weight: 400 !important; font-size: 16px;">Back to our website</a>
</div>
<div style="position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-size: 14px;">Built with <a href="https://docs.roundtable.ai/rjs/introduction" style="color: black; text-decoration: none; display: inline;">RoundtableJS</a></div>
`);
survey.finishSurvey(`
<h2 style="text-align: center; color: black; font-weight: 400 !important;">Thank you for your interest</h2>
<p style="text-align: center; color: #666666 !important; font-weight: 400 !important; margin-top: -10px;">A member of our sales team will contact you shortly.</p>
<div style="text-align: center; margin-top: 30px; margin-bottom: 10px">
<a href="https://www.roundtable.ai" style="background-color: black; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; font-weight: 400 !important; font-size: 16px;">Back to our website</a>
</div>
`);
}

runSurvey();
57 changes: 22 additions & 35 deletions examples/studies/data-annotation.js
Original file line number Diff line number Diff line change
@@ -1,57 +1,44 @@
import Survey from '../../library/core/survey.js';
import SingleSelect from '../../library/elements/singleSelect.js';
import BoundingBox from '../../library/elements/boundingBox.js';
import ProgressBar from '../../library/plugins/progressBar.js';

// Add images and questions for each page
const imageUrls = ['https://i.redd.it/three-cats-v0-xraium6wenpb1.jpg?width=720&format=pjpg&auto=webp&s=78e59ff2a4c87196176b11a4eaf83aafe5f1e917',
'https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12153852/American-Eskimo-Dog-standing-in-the-grass-in-bright-sunlight-400x267.jpg'];

async function addLabelingPage(survey, imageUrl, index) {
const imageContainsCat = new SingleSelect({
id: `labeling-q${index}`,
text: `Does this contain a cat?<br/><img src="${imageUrl}" style="width:100%;">`,
subText: 'Please select the correct answer',
options: ['Yes', 'No'],
});
const id = `q${index}`;
await survey.showPage({ id, elements: [ imageContainsCat ] });
}
const imageUrls = ['https://www.usnews.com/object/image/00000168-b98c-d246-a9f9-fddd8bb50000/190204-seattletunnel-editorial.jpg?update-time=1549301335348&size=responsive640',
'https://www.giviexplorer.com/imagesC/11886/576x576xGIVI-Explorer_friends4adventure_Ecuador-cover.jpg'];

async function addBoundingBoxPage(survey, imageUrl, index) {
const catBoundingBox = new BoundingBox({
const boundingBoxQ = new BoundingBox({
id: `bb-q${index}`,
text: `Draw a bounding box around the cat in the image below`,
text: `Draw a bounding box around the vehicles in the image below`,
subText: `If there are no vehicles, skip to the next page`,
imageUrl: imageUrl,
});
const id = `q${index}-bb`;
await survey.showPage({ id, elements: [ catBoundingBox ] });
await survey.showPage({ id, elements: [ boundingBoxQ ] });
}

async function runSurvey() {
const survey = new Survey({
participantId: 'participant_123',
condition: 'test',
participantId: 'test-participant',
condition: 'car-labeling',
});
// Initial labeling pages

const progressBar = new ProgressBar({
maxPages: imageUrls.length,
styles: {
bar: {
backgroundColor: 'black'
}
}
});
survey.addPlugin(progressBar);

// Bounding box pages
for (let i = 0; i < imageUrls.length; i++) {
await addLabelingPage(survey, imageUrls[i], i);
await addBoundingBoxPage(survey, imageUrls[i], i);
}

const catImages = imageUrls.filter((url, index) => survey.getResponse(`labeling-q${index}`) === 'Yes');

if (catImages.length > 0) {
// Add the progress bar plugin with custom styles and total pages
const progressBar = new ProgressBar({ maxPages: catImages.length, progressAsPercentage: true });
survey.addPlugin(progressBar);

// Bounding box pages
for (let i = 0; i < catImages.length; i++) {
await addBoundingBoxPage(survey, imageUrls[i], i);
}

survey.finishSurvey('Thank you for completing the task!');
};
survey.finishSurvey('Thank you for completing the task!');
}

runSurvey();
Loading

0 comments on commit c752b33

Please sign in to comment.