diff --git a/trivia-forge/src/Pages/TriviaGenPage.jsx b/trivia-forge/src/Pages/TriviaGenPage.jsx index ebdcadb4..4d53adfb 100644 --- a/trivia-forge/src/Pages/TriviaGenPage.jsx +++ b/trivia-forge/src/Pages/TriviaGenPage.jsx @@ -14,6 +14,7 @@ function TriviaGenPage() { // state hooks for managaing number of questions and catergory input by user const [numberOfQuestions, setNumberOfQuestions] = useState(''); const [category, setCategory] = useState(''); + const [isMultipleChoice, setIsMultipleChoice] = useState(false); const navigate = useNavigate(); @@ -21,9 +22,15 @@ function TriviaGenPage() { const handleSubmit = async (event) => { event.preventDefault(); // prevent default form submission behavior(browser reload) + let prompt = `Generate ${numberOfQuestions} trivia questions about ${category}.`; + if (isMultipleChoice) { + prompt += "Each question should include four multiple-choice options, the correct answer, and a fun fact. Separate each component with a newline."; + } else { + prompt += "Each question should come with its answer and a fun fact. Separate each component with a newline."; + } + // api call try { - const prompt = `Generate ${numberOfQuestions} trivia questions about ${category}.`; // API call to OpenAI const completion = await openai.chat.completions.create({ @@ -37,8 +44,9 @@ function TriviaGenPage() { }); const questions = completion.choices[0].message.content.split('\n'); // store trivia questions + // state property to pass data as object to new route navigate('/review', { state: { questions } }); - //console.log(completion.choices[0]); + //console.log(completion.choices[0].message); } catch (error) { console.error('Error calling OpenAI API:', error); } @@ -74,8 +82,14 @@ function TriviaGenPage() { />
- - + + setIsMultipleChoice(e.target.value)} + //className="form-control" + id="multipleChoice" + />
diff --git a/trivia-forge/src/Pages/TriviaReviewPage.jsx b/trivia-forge/src/Pages/TriviaReviewPage.jsx index f8ed6f66..a15fa198 100644 --- a/trivia-forge/src/Pages/TriviaReviewPage.jsx +++ b/trivia-forge/src/Pages/TriviaReviewPage.jsx @@ -2,6 +2,8 @@ import React from 'react'; import { useLocation } from 'react-router-dom'; // used to access passed state function TriviaReviewPage() { + // Reference: https://reactrouter.com/en/main/hooks/use-location + // pulls object from state property in TriviaGenPage const location = useLocation(); const { questions } = location.state;