Quiz maker

by jahongirsobirov

HTML

<script src="https://signel.onrender.com/signel.js"></script>
<div id="app">
  <div style="margin-bottom: 10px">
    Do you want to add quizes? <input type="checkbox" name="" id="checked"> <span id="status">$$status</span>
  </div>
  <div id="quiz-form">
    <div style="margin-bottom: 10px">
      <input id='quiz-title' placeholder='Quiz title'>
    </div>
    <div>
      <textarea id='quiz-description' placeholder='Quiz description'></textarea>
    </div>
    <div>
      <input id='quiz-time' placeholder='Quiz time' type='number'> minutes
    </div>
    <div style="margin-top: 10px">
      <button id='add-btn'>Add question</button>
    </div>
  </div>
</div>

CSS

.hide { display: none; }
.show { display: block; }

JavaScript

let state = el('#status', {
  checked: false,
  status: 'no',
})

let quizForm = el('#quiz-form', {
  classes: 'hide',
  question: '',
  optA: '',
  optB: '',
  optC: '',
  optD: ''
})

// let questForm = el('#question-form', {
//   classes: 'hide',
//   question: '',
//   optA: '',
//   optB: '',
//   optC: '',
//   optD: ''
// })

let questionList = [
  {question: "...", optionA: '...', otionB: '...', optionC: '...', optionD: '...'}
];

let currList = list(questionList)

model('#checked', state, 'checked')
model('#question-text', quizForm, 'question')
model('#option-a', quizForm, 'optA')
model('#option-b', quizForm, 'optB')
model('#option-c', quizForm, 'optC')
model('#option-d', quizForm, 'optD')

watch(state, 'checked', (v) => {
  quizForm.classes = v ? 'show' : 'hide'
})

// watch(quizForm, 'question', questVal => {
//   quizForm.question = questVal
//   console.log(questVal)
// })

click('#save-btn', ()=>{
  console.log({
    question: quizForm.question,
    optionA: quizForm.optA,
    optionB: quizForm.optB,
    optionC: quizForm.optC,
    optionD: quizForm.optD
  })
})