I need a help for creating a mock test bot with timer using react chatbotify

[ankitaivd]

I need a help for creating a mock test bot with timer using react chatbotify. I am using a set of question with options and correct answer and timer.

[tjtanjin]

Hey @ankitaivd! 😊 For your case, you'll want to use the transition attributes here: https://react-chatbotify.com/docs/api/attributes#transition

Specifically, you want to specify duration and set interruptable to true. Is this sufficient information for you to work with and if not, what other clarifications do you need?

[ankitaivd]

I want to create a mock test with react-chatbotify . this mock-test has timer per question, if the timer is over then next question will show.

[tjtanjin]

I want to create a mock test with react-chatbotify . this mock-test has timer per question, if the timer is over then next question will show.

This is a minimal example of the flow for your use case:

const flow={
    start: {
        message: "This is the first question",
        transition: {duration: 30000, interruptable: true},
        path: "second_question"
    },
    second_question: {
        message: "This is the second question",
        transition: {duration: 30000, interruptable: true},
        path: "third_question"
    }
 }

You can extend to more questions from this 😊

[ankitaivd]

if, I want add correct answer in a mocktest..Like this are mcq questions so the flow.
const helpOptions = ["Pending Forms", "Finalized Forms", "Rejected forms", "All Forms Status"];
const actionformOptions = ["General", "Personnel", "Travel", "Grant/Duration", "Contract", "Payments", "Extra Comp", "All"];
const flow={
start: {
message: "This is the first question",
transition: {duration: 30000, interruptable: true},
options: helpOptions,
path: "second_question"
},
second_question: {
message: "This is the second question",
transition: {duration: 30000, interruptable: true},
options: actionformOptions,
path: "start"
}
} .
So, how can add correct answer that will be show after user will give his answer. Also
this question static .

How i can create dynamic unlimited question flow ?

Also, I need audio input option for user input so, i use
audio: {
// Enable audio input
disabled: false,
inputPlaceholder: "Speak now...", // Placeholder text when audio input is enabled
}, as for settings, the audio icon is showing but it is not working. first it is showing audio off.

[tjtanjin]

if, I want add correct answer in a mocktest..Like this are mcq questions so the flow. const helpOptions = ["Pending Forms", "Finalized Forms", "Rejected forms", "All Forms Status"]; const actionformOptions = ["General", "Personnel", "Travel", "Grant/Duration", "Contract", "Payments", "Extra Comp", "All"]; const flow={ start: { message: "This is the first question", transition: {duration: 30000, interruptable: true}, options: helpOptions, path: "second_question" }, second_question: { message: "This is the second question", transition: {duration: 30000, interruptable: true}, options: actionformOptions, path: "start" } } . So, how can add correct answer that will be show after user will give his answer. Also this question static .

How i can create dynamic unlimited question flow ?

Also, I need audio input option for user input so, i use audio: { // Enable audio input disabled: false, inputPlaceholder: "Speak now...", // Placeholder text when audio input is enabled }, as for settings, the audio icon is showing but it is not working. first it is showing audio off.

A little hard to read without formatting but if I'm understanding correctly, this is probably what you want (I left comments where you should fill in your own logic):

const flow = {
    start: {
        message: "This is the first question",
        transition: {
            duration: 30000,
            interruptable: true
        },
        function: (params) => {
            // todo: add logic for isCorrect
            if (isCorrect(params.userInput)) {
                params.injectMessage(params.userInput);
            }
        },
        options: helpOptions,
        path: "second_question"
    },
    second_question: {
        message: "This is the second question",
        transition: {
            duration: 30000,
            interruptable: true
        },
        function: (params) => {
            // todo: add logic for isCorrect
            if (isCorrect(params.userInput)) {
                params.injectMessage(params.userInput);
            }
        },
        options: actionformOptions,
        path: "start"
    }
}

Creation of dynamic unlimited question flow still requires questions to come from somewhere. Are you intending to pull questions from some backend service? If so, you can look here for how to call an API: https://react-chatbotify.com/docs/examples/smart_conversation

If you're looking to connect with a LLM instead, you can look here: https://react-chatbotify.com/docs/examples/llm_conversation

For audio, you can look over here: https://react-chatbotify.com/docs/api/settings#audio

You may also find this helpful: https://react-chatbotify.com/docs/api/params

[ankitaivd]

thank you, but i am using api calling . but i want design flows like
const flow: any = {

start: {
  message: "Hi I'm your AI-Bot  ",
  transition: { duration: 1000 },
  chatDisabled: true,
  path: "show_options"
},
show_options: {
    message: "Please Enter student Id",
   
    path: "start_options"
  },

  start_options: {
    component: (params: any) => {
      const userInput: string = params.userInput;
      console.log(userInput);
      setUserid(userInput);

    },
    message: "Please Enter student Name",

    path: "end_options"
  },
  end_options: {
    component: (params: any) => {
      const userInput: string = params.userInput;
      console.log(userInput);
      setName(userInput);

    },


    message: "Please Select the Class",
    options: helpOptions,
      path: "question_options"
  },
  
  question_options: {
  component: (params: any) => {
    const userInput: string = params.userInput;
    return chatEndPointCallend(params);


  
},

};

here question_options call the api which will return a question array and this question array (where every question has a timer and correct answer) will showing in a loop like

start: {
message: "This is the first question",
transition: {
duration: 30000,
interruptable: true
},
function: (params) => {
// todo: add logic for isCorrect
if (isCorrect(params.userInput)) {
params.injectMessage(params.userInput);
}
},
options: helpOptions,
path: "second_question"
},
second_question: {
message: "This is the second question",
transition: {
duration: 30000,
interruptable: true
},
function: (params) => {
// todo: add logic for isCorrect
if (isCorrect(params.userInput)) {
params.injectMessage(params.userInput);
}
},
options: actionformOptions,
path: "start"
}

[tjtanjin]

Hey @ankitaivd, you probably want to loop question_options in your case. Something like this:

question_options: {
  options (params: Params) => {
    // do whatever else you want with the user input
    const userInput: string = params.userInput;
    // question is from the picked random question
    const question = ...
    // send the query to user
    params.injectMessage(result[0].query)
    // send the options
    return result[0].options
  },
  transition: {duration: result[0].timer, interruptable: true},
  function: () => {
    // logic to pick a random question after every answer
  },
  path: question_options,
}

Perhaps you can call your endpoint to fetch questions outside of the flow, assuming it always returns a finite set of dynamic questions. No point calling the endpoint each time. Though I'll be wary of including answers directly inside the return result, and consider validating answer server-side instead but that's not very relevant for the issue here.