x/qmining-data-editor
1
0
Fork 0
mirror of https://gitlab.com/MrFry/qmining-data-editor synced 2026-04-28 19:27:37 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

possible answers fix, next path fix, prettier format

Browse Source
This commit is contained in:
mrfry
2023-04-10 14:46:17 +02:00
parent e17bbe6402
commit 70b53e89aa
9 changed files with 377 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Question.js
+122 -117
View File
@@ -5,125 +5,130 @@ import styles from './question.module.css'
const overflowLength = 140
export default function Question({ question, onChange, index }) {
// FIXME: focus change when input changes to textarea
const possibleAnswers =
question.possibleAnswers || question.data.possibleAnswers
// FIXME: focus change when input changes to textarea
const possibleAnswers =
question.possibleAnswers || question.data.possibleAnswers
return (
<div className={styles.questionContainer}>
{question.Q && question.Q.length > overflowLength ? (
<textarea
placeholder="Kérdés..."
value={question.Q}
onChange={(e) => {
onChange({
...question,
Q: e.target.value,
})
}}
/>
) : (
<input
placeholder="Kérdés..."
type="text"
value={question.Q}
onChange={(e) => {
onChange({
...question,
Q: e.target.value,
})
}}
/>
)}
{question.A && question.A.length > overflowLength ? (
<textarea
placeholder="Helyes válasz..."
value={question.A}
onChange={(e) => {
onChange({
...question,
A: e.target.value,
})
}}
/>
) : (
<input
placeholder="Helyes válasz..."
type="text"
value={question.A}
onChange={(e) => {
onChange({
...question,
A: e.target.value,
})
}}
/>
)}
{possibleAnswers && possibleAnswers.length > 0 ? (
<>
<div className={styles.text}>Lehetséges válaszok:</div>
<div className={styles.possibleAnswers}>
{possibleAnswers.map((possibleAnswer, i) => {
// {"text":"a. Kétismeretlenes egyenletrendszert használunk.",
// "selectedByUser":true}
const pa =
typeof possibleAnswer === 'string'
? possibleAnswer
: possibleAnswer.text
return (
<div key={i}>
<div>
<input
onChange={() => {
return (
<div className={styles.questionContainer}>
{question.Q && question.Q.length > overflowLength ? (
<textarea
placeholder="Kérdés..."
value={question.Q}
onChange={(e) => {
onChange({
...question,
A: pa,
...question,
Q: e.target.value,
})
}}
checked={pa === question.A}
value={pa}
type="radio"
name={`possiblea${index ? index : ''}`}
/>
<span>{pa}</span>
</div>
<span
onClick={() => {
const newPossibleAnswers = possibleAnswers.filter(
(pa, j) => {
return j !== i
}
)
// FIXME: 2 possible answers?
onChange({
...question,
data: {
...question.data,
possibleAnswers: newPossibleAnswers,
},
possibleAnswers: newPossibleAnswers,
})
}}
className={styles.delete}
>
Törlés
</span>
</div>
)
})}
</div>
</>
) : null}
<input
type="text"
value={JSON.stringify(question.data)}
name="data"
onChange={(e) => {
console.log(e.target.value)
}}
/>
</div>
)
/>
) : (
<input
placeholder="Kérdés..."
type="text"
value={question.Q}
onChange={(e) => {
onChange({
...question,
Q: e.target.value,
})
}}
/>
)}
{question.A && question.A.length > overflowLength ? (
<textarea
placeholder="Helyes válasz..."
value={question.A}
onChange={(e) => {
onChange({
...question,
A: e.target.value,
})
}}
/>
) : (
<input
placeholder="Helyes válasz..."
type="text"
value={question.A}
onChange={(e) => {
onChange({
...question,
A: e.target.value,
})
}}
/>
)}
{possibleAnswers && possibleAnswers.length > 0 ? (
<>
<div className={styles.text}>Lehetséges válaszok:</div>
<div className={styles.possibleAnswers}>
{possibleAnswers.map((possibleAnswer, i) => {
// {"text":"a. Kétismeretlenes egyenletrendszert használunk.",
// "selectedByUser":true}
const pa =
typeof possibleAnswer === 'string'
? possibleAnswer
: possibleAnswer.val
return (
<div key={i}>
<div>
<input
onChange={() => {
onChange({
...question,
A: pa,
})
}}
checked={pa === question.A}
value={pa}
type="radio"
name={`possiblea${
index ? index : ''
}`}
/>
<span>{pa}</span>
</div>
<span
onClick={() => {
const newPossibleAnswers =
possibleAnswers.filter(
(pa, j) => {
return j !== i
}
)
// FIXME: 2 possible answers?
onChange({
...question,
data: {
...question.data,
possibleAnswers:
newPossibleAnswers,
},
possibleAnswers:
newPossibleAnswers,
})
}}
className={styles.delete}
>
Törlés
</span>
</div>
)
})}
</div>
</>
) : null}
<input
type="text"
value={JSON.stringify(question.data)}
name="data"
onChange={(e) => {
console.log(e.target.value)
}}
/>
</div>
)
}