question-form v1.0.5
question-form
React component for adding exercise questions to webpages or blogs.
Install
npm install --save question-formUsage
Props
questions(required): of type Array. The required format of the questions array is shown below.color(optional -> default - '#ddd'): of type String used on for the borders of the question container.
Required format of questions
Every question should be in form of objects with three keys: name (string), options (array) and answer (number) which is the index of the answer in the options array.
Example
import React, { Component } from 'react'
import QuestionForm from 'question-form'
import 'question-form/dist/index.css'
const Page = () => {
const questions = [
{
name: 'What is React?',
options: [
"React is this",
"React is that",
"React is cool"
],
answer: 0
},
{
name: 'What is science?',
options: [
"Science is bad",
"Science is good",
"Science is wow"
],
answer: 2
},
]
return (
<QuestionForm questions={questions} color='rgb(0, 140, 255)'>
)
} <QuestionForm questions={questions} color='rgb(0, 140, 255)'>
)} Result:

Result:
And on selection:
answer: 0 signifies the first option in the first question is correct and answer: 2 signifies the last option in the second question is correct.
Use case - markdown blog posts
This component can be used in any framework that allows querying of markdown posts. The questions array would be added to the frontmatter of the markdown, and on querying, this component can be used with the questions property of the frontmatter assigned to the questions prop.
This example uses a Gatsby Blog.
In the post markdown file:
---
title: "Post title"
questions:
[
{
name: "What is React?",
options: ["React is this", "React is that", "React is cool"],
answer: 0,
},
...,
]
---
...Wherever you query your post, you could add the following: (the query used here is as shown in gatsby-starter-blog)
import React from 'react'
import QuestionForm from 'question-form'
---
export default ({data}) => {
const {frontmatter: {title, questions}} = data.markdownRemark;
return (
<div>
<h1>{title}</h1>
// some stuffs here
<h2>Exercise questions</h2>
// ensure the questions property is not null
{questions && (
<QuestionForm questions={questions}>
)}
</div>
)
}
---
export const query = graphql`
query($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
fields {
slug
}
frontmatter {
title
questions {
name
options
answer
}
}
}
}
`You can check a practical example on my blog in this post. You'll find it at the bottom of the post
Issues and Contributions
Your contribution to this project would be highly appreciated. It could be a documentation issue, pull request, feature request, they are all welcome.
License
MIT © dillionmegida