first commit
This commit is contained in:
sajjadtalkhabi
@@ -0,0 +1,406 @@
|
||||
<template>
|
||||
<div class="exam-question-builder">
|
||||
<div
|
||||
v-for="(question, questionIndex) in questions"
|
||||
:key="question.id"
|
||||
class="exam-question-builder__card"
|
||||
>
|
||||
<div class="exam-question-builder__head">
|
||||
<p class="exam-question-builder__title">سوال شماره {{ questionIndex + 1 }}</p>
|
||||
<button
|
||||
type="button"
|
||||
:disabled="disabled"
|
||||
class="exam-question-builder__remove"
|
||||
aria-label="حذف سوال"
|
||||
@click="removeQuestion(question.id)"
|
||||
>
|
||||
<SvgIcon name="close" :size="20" color="#b1b1b1" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="exam-question-builder__row">
|
||||
<div class="exam-question-builder__col exam-question-builder__col--main">
|
||||
<label class="exam-question-builder__label">متن سوال</label>
|
||||
<textarea
|
||||
:value="question.title"
|
||||
:disabled="disabled"
|
||||
rows="1"
|
||||
placeholder="لطفا سوال خود را وارد کنید"
|
||||
class="exam-question-builder__textarea"
|
||||
@input="updateQuestion(question.id, { title: $event.target.value })"
|
||||
/>
|
||||
</div>
|
||||
<div class="exam-question-builder__col exam-question-builder__col--score">
|
||||
<label class="exam-question-builder__label">بارم نمره</label>
|
||||
<input
|
||||
:value="question.score"
|
||||
:disabled="disabled"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
placeholder="15"
|
||||
class="exam-question-builder__input"
|
||||
@input="updateQuestion(question.id, { score: $event.target.value })"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="exam-question-builder__answers-row">
|
||||
<div class="exam-question-builder__answers">
|
||||
<p class="exam-question-builder__label">گزینهها</p>
|
||||
<div class="exam-question-builder__answers-list">
|
||||
<div
|
||||
v-for="answer in question.answers"
|
||||
:key="answer.id"
|
||||
class="exam-question-builder__answer"
|
||||
>
|
||||
<input
|
||||
:value="answer.title"
|
||||
:disabled="disabled"
|
||||
type="text"
|
||||
placeholder="متن گزینه"
|
||||
class="exam-question-builder__answer-input"
|
||||
@input="updateOption(question.id, answer.id, $event.target.value)"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
:disabled="disabled"
|
||||
class="exam-question-builder__answer-remove"
|
||||
aria-label="حذف گزینه"
|
||||
@click="removeOption(question.id, answer.id)"
|
||||
>
|
||||
<SvgIcon name="close" :size="14" color="#b1b1b1" />
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
:disabled="disabled"
|
||||
class="exam-question-builder__answer-add"
|
||||
aria-label="افزودن گزینه"
|
||||
@click="addOption(question.id)"
|
||||
>
|
||||
<SvgIcon name="plus" :size="16" color="#b1b1b1" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="exam-question-builder__correct">
|
||||
<SelectField
|
||||
:model-value="question.correctAnswerId"
|
||||
:name="`correctAnswer-${question.id}`"
|
||||
:options="correctAnswerOptions(question)"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
label="گزینه صحیح"
|
||||
:disabled="disabled || question.answers.length === 0"
|
||||
@update:model-value="
|
||||
(value) => updateQuestion(question.id, { correctAnswerId: value || null })
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
:disabled="disabled"
|
||||
class="exam-question-builder__add"
|
||||
aria-label="افزودن سوال"
|
||||
@click="addQuestion"
|
||||
>
|
||||
<SvgIcon name="plus" :size="20" color="#b1b1b1" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
import SelectField from '@/components/form/SelectField.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: { type: Array, default: () => [] },
|
||||
disabled: { type: Boolean, default: false },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const defaultLabels = ['گزینه اول', 'گزینه دوم', 'گزینه سوم', 'گزینه چهارم']
|
||||
|
||||
const questions = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []))
|
||||
|
||||
const cloneQuestions = () =>
|
||||
questions.value.map((q) => ({
|
||||
...q,
|
||||
answers: Array.isArray(q.answers) ? q.answers.map((a) => ({ ...a })) : [],
|
||||
}))
|
||||
|
||||
const createId = (prefix) => `${prefix}-${Date.now()}-${Math.random().toString(16).slice(2)}`
|
||||
|
||||
const createOption = () => ({ id: createId('answer'), title: '' })
|
||||
|
||||
const createQuestion = () => ({
|
||||
id: createId('question'),
|
||||
title: '',
|
||||
score: '',
|
||||
correctAnswerId: null,
|
||||
answers: [createOption(), createOption()],
|
||||
})
|
||||
|
||||
const emitQuestions = (next) => emit('update:modelValue', next)
|
||||
|
||||
const addQuestion = () => emitQuestions([...cloneQuestions(), createQuestion()])
|
||||
|
||||
const removeQuestion = (questionId) => {
|
||||
const next = cloneQuestions().filter((q) => q.id !== questionId)
|
||||
emitQuestions(next.length > 0 ? next : [createQuestion()])
|
||||
}
|
||||
|
||||
const updateQuestion = (questionId, patch) => {
|
||||
const next = cloneQuestions().map((q) => (q.id === questionId ? { ...q, ...patch } : q))
|
||||
emitQuestions(next)
|
||||
}
|
||||
|
||||
const addOption = (questionId) => {
|
||||
const next = cloneQuestions().map((q) => {
|
||||
if (q.id !== questionId) return q
|
||||
return { ...q, answers: [...q.answers, createOption()] }
|
||||
})
|
||||
emitQuestions(next)
|
||||
}
|
||||
|
||||
const removeOption = (questionId, answerId) => {
|
||||
const next = cloneQuestions().map((q) => {
|
||||
if (q.id !== questionId) return q
|
||||
const answers = q.answers.filter((a) => a.id !== answerId)
|
||||
return {
|
||||
...q,
|
||||
answers,
|
||||
correctAnswerId: String(q.correctAnswerId) === String(answerId) ? null : q.correctAnswerId,
|
||||
}
|
||||
})
|
||||
emitQuestions(next)
|
||||
}
|
||||
|
||||
const updateOption = (questionId, answerId, title) => {
|
||||
const next = cloneQuestions().map((q) => {
|
||||
if (q.id !== questionId) return q
|
||||
return {
|
||||
...q,
|
||||
answers: q.answers.map((a) => (a.id === answerId ? { ...a, title } : a)),
|
||||
}
|
||||
})
|
||||
emitQuestions(next)
|
||||
}
|
||||
|
||||
const optionLabel = (index) => defaultLabels[index] || `گزینه ${index + 1}`
|
||||
|
||||
const correctAnswerOptions = (question) =>
|
||||
question.answers.map((a, idx) => ({ value: a.id, label: optionLabel(idx) }))
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.exam-question-builder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
|
||||
&__card {
|
||||
border: 1px solid #e7e2dd;
|
||||
border-radius: 1.5rem;
|
||||
padding: 0.875rem;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 2.5%);
|
||||
}
|
||||
|
||||
&__head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #4b4b4b;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__remove {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 9999px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&__row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.75rem;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
grid-template-columns: 5fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
&__col--main {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__label {
|
||||
display: block;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 300;
|
||||
color: var(--color-prim-gray);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
&__textarea,
|
||||
&__input {
|
||||
width: 100%;
|
||||
border: 1px solid var(--color-thd-gray);
|
||||
border-radius: 1.5rem;
|
||||
padding: 0.5rem 1.25rem;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.9rem;
|
||||
color: #4b4b4b;
|
||||
outline: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 1px var(--color-validate, var(--color-primary));
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&__textarea {
|
||||
resize: none;
|
||||
min-height: 2.35rem;
|
||||
}
|
||||
|
||||
&__input {
|
||||
height: 2.35rem;
|
||||
font-family: var(--font-family-en);
|
||||
}
|
||||
|
||||
&__answers-row {
|
||||
margin-top: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
&__answers {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__answers-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__answer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
border: 1px solid var(--color-thd-gray);
|
||||
border-radius: 1.5rem;
|
||||
padding: 0.375rem 0.875rem;
|
||||
min-width: 10rem;
|
||||
}
|
||||
|
||||
&__answer-input {
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.875rem;
|
||||
color: #4b4b4b;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__answer-remove,
|
||||
&__answer-add {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 9999px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&__answer-add {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background: rgba(104, 104, 104, 5%);
|
||||
}
|
||||
|
||||
&__correct {
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
width: 14rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__add {
|
||||
height: 3rem;
|
||||
width: 100%;
|
||||
border-radius: 1rem;
|
||||
border: 1px dashed #e7e2dd;
|
||||
background: #f7f7f7;
|
||||
color: #b1b1b1;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user