Skip to content

Commit

Permalink
HTML & CSS also work for Single Answer
Browse files Browse the repository at this point in the history
  • Loading branch information
@Meefish
Meefish committed Dec 8, 2024
1 parent b3a3463 commit 248f868
Showing 1 changed file with 101 additions and 68 deletions.
169 changes: 101 additions & 68 deletions src/components/Question.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ interface QuestionProps {
}

const Question: React.FC<QuestionProps> = ({
id, // Destructure 'id' from props
id,
questionIndex,
isMultipleChoice,
onRemoveQuestion,
Expand All @@ -23,14 +23,14 @@ const Question: React.FC<QuestionProps> = ({
const [questionText, setQuestionText] = useState('');
const [questionDescription, setQuestionDescription] = useState('');

// State for answer options
// State for answer options (used only if multiple choice)
const [answers, setAnswers] = useState<AnswerOption[]>([
{ id: 'A', text: '' },
{ id: 'B', text: '' },
{ id: 'C', text: '' },
]);

// State for toggles
// State for toggles (only meaningful for multiple choice)
const [allowMultipleAnswers, setAllowMultipleAnswers] = useState(false);
const [allowOpenAnswers, setAllowOpenAnswers] = useState(false);

Expand All @@ -39,29 +39,29 @@ const Question: React.FC<QuestionProps> = ({

// Handle removing the entire question
const handleRemoveQuestion = () => {
onRemoveQuestion(id); // Use 'id' instead of 'questionIndex'
onRemoveQuestion(id);
};

// Handle changing an answer text
// Handle changing an answer text (multiple choice only)
const handleAnswerChange = (index: number, newText: string) => {
const newAnswers = [...answers];
newAnswers[index].text = newText;
setAnswers(newAnswers);
};

// Handle removing a single answer
// Handle removing a single answer (multiple choice only)
const handleRemoveAnswer = (index: number) => {
const newAnswers = [...answers];
newAnswers.splice(index, 1);

// Re-label answers from A, B, C... based on new order
const updatedAnswers = newAnswers.map((ans, i) => {
return { ...ans, id: String.fromCharCode(65 + i) }; // 65 is 'A'
return { ...ans, id: String.fromCharCode(65 + i) }; // 65 = 'A'
});
setAnswers(updatedAnswers);
};

// Handle adding a new answer
// Handle adding a new answer (multiple choice only)
const handleAddAnswer = () => {
const nextLetter = String.fromCharCode(65 + answers.length);
setAnswers([...answers, { id: nextLetter, text: '' }]);
Expand Down Expand Up @@ -98,70 +98,103 @@ const Question: React.FC<QuestionProps> = ({
/>
</div>

{answers.map((answer, index) => (
<div className="qst-answer-row" key={answer.id}>
<div className="qst-answer-label">{answer.id}.</div>
<div className="qst-input-container qst-answer-input-container">
<input
className="qst-text-input qst-answer-text"
type="text"
placeholder="Enter answer..."
value={answer.text}
onChange={(e) => handleAnswerChange(index, e.target.value)}
/>
{isMultipleChoice && (
<>
{/* Answer Options */}
{answers.map((answer, index) => (
<div className="qst-answer-row" key={answer.id}>
<div className="qst-answer-label">{answer.id}.</div>
<div className="qst-input-container qst-answer-input-container">
<input
className="qst-text-input qst-answer-text"
type="text"
placeholder="Enter answer..."
value={answer.text}
onChange={(e) => handleAnswerChange(index, e.target.value)}
/>
</div>
<button className="qst-remove-answer-btn" onClick={() => handleRemoveAnswer(index)}>
<img src={'../assets/XCloseSVG.svg'} alt="Remove Answer" />
</button>
</div>
))}

{/* Create new answer button and toggles */}
<div className="qst-create-new-answer-row">
<div className="qst-answer-label">{String.fromCharCode(65 + answers.length)}.</div>
<button className="qst-create-new-answer-btn" onClick={handleAddAnswer}>
<img src={'../assets/AddQuestionButtonSVG.svg'} alt="Add new answer" />
</button>

{/* Toggles for multiple choice only */}
<div className="qst-toggle-row">
<button
className="qst-toggle-btn"
onClick={() => setAllowMultipleAnswers(!allowMultipleAnswers)}
>
<img
src={
allowMultipleAnswers
? '../assets/RadioBoxFilledInSVG.svg'
: '../assets/RadioBoxNotFilledSVG.svg'
}
alt="Toggle multiple answers"
/>
</button>
<div className="qst-toggle-label">Allow multiple answers</div>

<button
className="qst-toggle-btn"
style={{ marginLeft: '20px' }}
onClick={() => setAllowOpenAnswers(!allowOpenAnswers)}
>
<img
src={
allowOpenAnswers
? '../assets/RadioBoxFilledInSVG.svg'
: '../assets/RadioBoxNotFilledSVG.svg'
}
alt="Toggle open answers"
/>
</button>
<div className="qst-toggle-label">Allow open answers</div>
</div>
</div>
<button className="qst-remove-answer-btn" onClick={() => handleRemoveAnswer(index)}>
<img src={'../assets/XCloseSVG.svg'} alt="Remove Answer" />
</button>
</div>
))}

<div className="qst-create-new-answer-row">
<div className="qst-answer-label">{String.fromCharCode(65 + answers.length)}.</div>
<button className="qst-create-new-answer-btn" onClick={handleAddAnswer}>
<img src={'../assets/AddQuestionButtonSVG.svg'} alt="Add new answer" />
</button>

{/* Toggles placed on the same line as D. Adjust as needed */}
<div className="qst-toggle-row">
<button
className="qst-toggle-btn"
onClick={() => setAllowMultipleAnswers(!allowMultipleAnswers)}
>
<img
src={allowMultipleAnswers ? '../assets/RadioBoxFilledInSVG.svg' : '../assets/RadioBoxNotFilledSVG.svg'}
alt="Toggle multiple answers"
/>
</button>
<div className="qst-toggle-label">Allow multiple answers</div>

<button
className="qst-toggle-btn"
style={{ marginLeft: '20px' }}
onClick={() => setAllowOpenAnswers(!allowOpenAnswers)}
>
<img
src={allowOpenAnswers ? '../assets/RadioBoxFilledInSVG.svg' : '../assets/RadioBoxNotFilledSVG.svg'}
alt="Toggle open answers"
/>
</button>
<div className="qst-toggle-label">Allow open answers</div>
</div>
</div>
{/* Show regex only if open answers is allowed */}
{allowOpenAnswers && (
<div className="qst-regex-row">
<div className="qst-regex-label">Regex.</div>
<div className="qst-input-container qst-regex-input-container">
<input
className="qst-text-input qst-regex-text"
type="text"
placeholder="Enter regex when needed..."
value={regexValue}
onChange={(e) => setRegexValue(e.target.value)}
/>
</div>
</div>
)}
</>
)}

{allowOpenAnswers && (
<div className="qst-regex-row">
<div className="qst-regex-label">Regex.</div>
<div className="qst-input-container qst-regex-input-container">
<input
className="qst-text-input qst-regex-text"
type="text"
placeholder="Enter regex when needed..."
value={regexValue}
onChange={(e) => setRegexValue(e.target.value)}
/>
{!isMultipleChoice && (
<>
{/* For single answer: no answer options, no toggles, regex always visible */}
<div className="qst-regex-row">
<div className="qst-regex-label">Regex.</div>
<div className="qst-input-container qst-regex-input-container">
<input
className="qst-text-input qst-regex-text"
type="text"
placeholder="Enter regex when needed..."
value={regexValue}
onChange={(e) => setRegexValue(e.target.value)}
/>
</div>
</div>
</div>
</>
)}
</div>
);
Expand Down

0 comments on commit 248f868

Please sign in to comment.