queez - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

package.json

 {
   "name": "queez",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A simple Javascript library to create quizz",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -299,3 +299,3 @@ #Queez
 
-	An `object` represents an `ET` and an `array` represents an `OU`:
+	An `object` represents an `ET` and an `array` represents an `OR`:
 
@@ -330,3 +330,3 @@ To define a result with the following condition : "favorite color" is 	"yellow" `AND` "favorite food" is "burger", must be :
 	{ "filter": { "favorite-color": ["blue", "red"], "favorite-food": "rice" } }
-	//favorite color is blue OU red, AND favorite food is rice
+	//favorite color is blue OR red, AND favorite food is rice
 
@@ -641,2 +641,119 @@ {
 
+###Example 3 : With React :
+
+[Demo here](https://arncet.github.io/queez-react-demo/)
+
+```javascript
+import React, { Component } from 'react'
+import Queez from 'queez'
+import configSuperHero from './configSuperHero'
+import configSurvey from './configSurvey'
+import JSONTree from 'react-json-tree'
+
+//Callback for complete event (super hero quizz)
+const superHeroQuizzCompleteCallback = quizz => {
+  return quizz.getResponse().map(result => result.content)
+}
+
+//Callback for complete event (survey quizz)
+const surveyQuizzCompleteCallback = quizz => {
+  return quizz.getResponse().map(result => ({question: result.content, answer: result.answers[0].content}))
+}
+
+class App extends Component {
+  constructor(props) {
+    super(props)
+
+    //Quizz instantiation
+    const quizz = new Queez(this.getCompleteConfig(configSuperHero, superHeroQuizzCompleteCallback))
+    this.state = {quizz}
+  }
+
+  render() {
+    const {quizz, results} = this.state
+    if (!quizz) return <div>No quizz found :(</div>
+    return (
+      <div className="App">
+        <QuizzTabs reset={(config, callback) => this.reset(config, callback)}/>
+        <h1>{quizz.custom.title}</h1>
+        <ul>
+          {quizz.questions.map((question, i) => {
+            return (
+              <Question
+                question={question}
+                key={i}
+                respond={(questionId, answerId) => this.respond(questionId, answerId)}
+                unRespond={(questionId, answerId) => this.unRespond(questionId, answerId)}
+              />
+            )})
+          }
+        </ul>
+        {results ? <JSONTree data={results} /> : null}
+      </div>
+    )
+  }
+
+  respond(questionId, answerId) {
+    const quizz = this.state.quizz
+    quizz.getQuestion(questionId).respond(answerId)
+    this.setState({quizz})
+  }
+
+  unRespond(questionId, answerId) {
+    const quizz = this.state.quizz
+    quizz.getQuestion(questionId).unRespond(answerId)
+    this.setState({quizz})
+  }
+
+  //Add complete event callback to the given config
+  getCompleteConfig(config, callback) {
+    config.callbacks = {
+      onQuizzComplete: [
+        quizz => this.setState({results: callback(quizz)})
+      ]
+    }
+    return config
+  }
+
+  reset(config, callback) {
+    const quizz = new Queez(this.getCompleteConfig(config, callback))
+    this.setState({quizz, results: null})
+  }
+}
+
+const QuizzTabs = ({reset}) => (
+  <div>
+    <button onClick={() => reset(configSuperHero, superHeroQuizzCompleteCallback)}>Super hero</button>
+    <button onClick={() => reset(configSurvey, surveyQuizzCompleteCallback)}>Survey</button>
+  </div>
+)
+
+const Question = ({question, respond, unRespond}) => (
+  <li>
+    <p>{question.content}</p>
+    <ul>
+      {question.answers.map((answer, i) => {
+        return (
+          <Answer
+            answer={answer}
+            key={i}
+            respond={answerId => respond(question.id, answerId)}
+            unRespond={answerId => unRespond(question.id, answerId)}
+            isSelected={question.answersIds.includes(answer.id)}
+          />
+        )
+      })}
+    </ul>
+  </li>
+)
+
+const Answer = ({answer, respond, unRespond, isSelected}) => {
+  const style = isSelected ? {color: 'red'} : {}
+  const onClick = isSelected ? unRespond : respond
+  return <button onClick={() => onClick(answer.id)} style={style}>{answer.content}</button>
+}
+
+export default App;
+```
+
 ##Development:
@@ -643,0 +760,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

139597

increased by2.46%

Number of lines in readme file

774

increased by17.81%

No dependency changes