Check demo - https://codesandbox.io/s/quiz-example-error-b6c81
If i want to reuse onComplete result object i useState for this but i catch error

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

  "dependencies": {
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-quiz-component": "0.3.4",
    "react-scripts": "3.4.1"
  },

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency rollup to v4.16.4
• chore(deps): update react monorepo (eslint-plugin-react-hooks, react, react-dom)
• chore(deps): update dependency mini-css-extract-plugin to v2.9.0
• chore(deps): update dependency eslint to v9
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update dependency webpack-cli to v5

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

On the results page it would be nice to show the incorrect answer someone chose in addition to the correct answer just for feedback purposes. Mostly for when you are looking at all of the questions

In this library, the only problem is the question come one by one is this possible to display 10 question at the same time!!!

Instead of giving instant answer upon making a choice, it would make more sense to display the correct answer AFTER you click the Next button. That way you can a) change your mind as many times you want before "submitting" a choice/answer and b) invoke an API to check the answer if your questions are served via remote services for example.

Hi, I suggest you could add these features:

• Custom Header ( you can change the "X Questions" part)
• An option for change the text variables value (like the "default" header "Questions" text

I'm thankful for your component.

1️⃣如何改变开始测验按钮的文本，现在默认是英文的Start Quiz，用户能否手动修改成“开始测验”？
2️⃣目前只支持单选，能否支持checkbox多选框？

Is there any way to take the input from the user only once? So when the user clicks on an answer (Maybe correct or incorrect), they should not be able to change the answer when this prop is set to false. (continueTillCorrect={false})

Also when this prop is set to false, we could auto click on Next button after 1-2 seconds timeout (Just additional suggestion)

Would be nice to have props for styling main container, individual questions and even options

Regards,

Steps to reproduce

• configure quiz per Enabling Custom Result Page
• complete the quiz

Actual result: custom result page is not rendered
Expected result: custom result page is rendered

Notes

• works fine in 0.3.4
• seems regression after 933e506

Hello there
So I have large content and when users click the following button it scrolls to the top and users need to scroll down for selecting an answer and finish the quiz. But it's uncomfortable to scroll down every time for every question. Please fix it

Is there a way to include pictures in questions without editing the question.jsx file in the node modules?

I can see questionPic = _questions$i.questionPic, in the quiz.js inside the node modules but the value is never read.

This is an amazing little component. Thanks for building this. One question I have is that you've got a ton of states in the Core. Wouldn't it be easier to maintain and debug if you used a Reducer here for all these states? Also, wouldn't it better to create some sort of Context here around the whole quiz to save some states? Thanks.

I noticed on the multiple selection you can continue to click on answers when you got the previous answer incorrect.

This probably isnt a bug but it would be much better if you coundnt continue to select an answer after they got one incorrect. It makes things too easy.

This would be a big feature improvement for multiple answers.

Im getting an error when trying to install it.
It seems like dont work with the latest version of React (18.0.0)

can I add front page as it is not showing

Requested by @harry0071 and @PTBKoo at #21

Hello, im a little newbie in React and js.

Its there a way to get the quiz.js from a file from the Cloud
Thank you

There is a huge type error here upon installing and using a simple <Quiz quiz={quiz} />

What to do? How to get it working?

Doesnt happen all the time but happens while clicking an answer.

TypeError: correct.includes is not a function

I want to set a timer.For each question if the time is finished that particular question will be skipped
how to implement this feature!?

Hi, I am using this package past 1 month. I have enabled the showInstantFeedback but it's only showing the explanation on correct answer not on incorrect answer. Why ? How we can enable that ?

Hi - thanks (again!) for this great quiz component!

I'm trying to edit the styling a bit, but I'm having some trouble. I would like to replace the "single selection" and "pick 1" displays with the "Next" button, but I am not finding the correct place to make this change. Any advice would be greatly appreciated. So, basically, instead of having the "single selection" and "pick 1" buttons at the top, I would like them to NOT display at all, and then once the user selects the correct answer, the "Next" button will appear in the space where the "single selection" and "pick 1" buttons were originally - not at the bottom of the screen.

Here is my implementation of the quiz app so far, in case you are interested:
https://ap-theory.now.sh/pitch-quiz

Thanks again,

Jon

Hi there,
I want to shuffle variants of questions. It will be like shuffle questions but for variants

Could not find a declaration file for module 'react-quiz-component'. '/Users/anees/Documents/coding/eu_drive_fe/node_modules/react-quiz-component/lib/Quiz.js' implicitly has an 'any' type.
Try npm i --save-dev @types/react-quiz-component if it exists or add a new declaration (.d.ts) file containing declare module 'react-quiz-component';

Hi there
I have a large page and at the bottom, I have a quiz. when I click the next button to get the next question, it scrolls up(navigates to the top) and it's uncomfortable to scroll down every question. is there any way to fix it?

Once the user has picked all possible answers from a multiple answer question, the non-selected answers don't get disabled. Unlike when the question type is single.
This can be observed in question four of the demo provided (https://wingkwong.github.io/react-quiz-component)

Non-selected answers is being greyed out as expected (question type: single)

Non-selected answer isn't being greyed out (question type: multiple)

This issue allows the user to keep selecting answers even after they've selected as many answers as they are allowed, causing this in the the results page

How do I get this to work with React v17 and up? Is the package not compatible with newer versions of react?

Hello i want to know if its posible to show an image and a text in a question

Hi all,

How do i customize the single selection text?

there must be a time for quiz after that quiz have to show results. and user can't refresh the page if quiz has been started. and when you start the quiz that timer starts and you have to complete that quiz in time

Is it possible to disable correct answer while choose from some answer. Instead, the answer and score display into the end of page? Thanks

I am wondering how to show the total number of questions that need to be answered as well as the current question being answered:

1 of 5
Question 1

2 of 5
Question 2

Thanks.

Hi,

My quiz doesn't have a correct answer, it's a questionaire about drinking, with a question being like:
How many drinks do you drink a week?
a. none
b. less than 5
c. more than 10

When they choose one it just applies a score no a correct or incorrect answer. Is this possible?

Thanks!

hi
do u have idea for adding timer ?

Hey!
I want the quiz to show the right answer (as instant feedback) immediately when clicked.
i.e. if user selects any answer, the correct answer should be highlighted.

I assume that the property revealAnswerOnSubmit={true} should do this operation, but it doesn't seem to work.

Result upon clicking: nothing is highlighted at all!

What's the best way to reload the quiz component, if the user doesn't pass the quiz (based on a predefined value which determines whether they have passed or not)? We are currently using a custom result page, with a state, scorePass, that tracks whether the user passed the quiz or not. Our code is below. But, when we try to re-render the component by setting the state of another value, on an onClick, the re-render simply brings us back to the custom result page, and not to the start of the quiz. Any thoughts?

const renderCustomResultPage = (obj) => {
   function retakeQuiz(e) {
       const item = e.target.value;
       console.log(item);
       setQuizRetake(true);
      
   }
   function GetScore(props) {
           
            if (props.score) {
                return (
                    'Congratulations! You passed the test.' 
                    )
            } else {   
                return (
                    <p>We are sorry. You did not pass the test initially. 
                    <button value="retakeQuiz" onClick={retakeQuiz}>Take it Again</button>
                    </p>
                    )
            }
       
       }

   
   return (
     
      <div>
               
                       
                        <GetScore score={scorePass} />
              
               
     </div>
     
      
    
   )
 }

Is it possible to quit a quiz and still get result summary?
For example, I want to quit a 10 questions quiz in question number 4 and still get result summary?

Also how do we include quiz timing?

Multiple choice feature is great! One bug Ive encountered was when you have multiple choice questions back to back the 'next' button doesnt show.

Hi all,

how do i show all the questions and not showing them one by one. Also how to allow answer change and review all answer before submit

I'd like to disable the default style to use my own stylesheet without having to override everything with !important.

Hello all,

How can i get the quiz object before the last question is answered. In case i need to set a timer. I need to get the answers once the time is up even though it's not completed.

onComplete method is firing twice.

On the first instance, the payload does not contain the score/total correct answers etc.
However, on second run it does contain the correct data.

Requested by @PTBKoo at #21

Can the size of the "quesitonPic" image be set?

Hi, it would be nice to pass a function as props "onComplete" to the component.

Is there any way now to understand if the quiz is ended and get results?

Thanks, Au

The following message is being shown in the console.

marked(): sanitize and sanitizer parameters are deprecated since version 0.7.0, should not be used and will be removed in the future. Read more here: https://marked.js.org/#/USING_ADVANCED.md#options

Hello, thank you for your work and the lib whose features looks very nice!

After running through previous issues concerning this error ( 79 and 35 ), I'm facing this issue even tho I use 0.5.0 after a yarn install.

Fresh install, nothing fancy:

yarn add [email protected]

Simple component as per the readme as :

...
const quiz = {...}
...
return <Quiz quiz={quiz}/>
...

results in:

I also tried:

yarn add react-quiz-component@https://github.com/wingkwong/react-quiz-component.git\#develop

(which seems to fail for other reasons)

Any input truly appreaciated.

Hello,
I have an issue, when rendering the result, the explanations don't appear.
I even tried with the original example, the results appear but I can't see the explanations.
Below is an exemple of how I'm rendering the component.
If I add showDefaultResult={false} and customResultPage={renderCustomResultPage} then there is no render at all.

Also, when I add a console.log(obj) in the const renderCustomResultPage = (obj) => {}, the results are duplicated in the console.

Quiz :
<Quiz
className={myClass}
quiz={myQuiz}
shuffle={true}
showDefaultResult={false}
customResultPage={renderCustomResultPage}
/>

Any help would be welcome. Thank you

HOW CAN CUSTOMIZE APPEARANCE