Quiz on microjob.uz wz Signel v2

by jahongirsobirov

HTML

<script src="https://signel.onrender.com/signel.js"></script>
<div id="app">
  <input type="checkbox" name="" id="quiz-check"> Do you want to add quiz?<br><br>
  <div id="quiz-form">
    <input type="text" name="" id="quiz-title"><br><br>
    <textarea name="" id="quiz-description"></textarea><br><br>
    <span id="warning">$$msg</span>
    <button id="add-question">Add question</button> <button id="save-question">Save question</button><br><br>
    <div id="question-form">
      <textarea name="" id="question"></textarea><br><br>
      A) <input type="text" id="opt-a"><br><br>
      B) <input type="text" id="opt-b"><br><br>
      C) <input type="text" id="opt-c"><br><br>
      D) <input type="text" id="opt-d"><br><br>
    </div>
  </div>
</div>

JavaScript

let quiz = state({
  checked: false,
  title: '',
  description: '',
  questions: [],
  msg: ''
})

dom('#quiz-check').change(()=> quiz.checked = !quiz.checked)
watch(()=> quiz.checked, (value)=> {
  if(value === true) dom('#quiz-form').show()
  else dom('#quiz-form').hide()
})

dom('#quiz-title').on('input', ()=> quiz.title = dom('#quiz-title').val())
dom('#quiz-description').on('input', ()=> quiz.description = dom('#quiz-description').val())

dom('#warning').css('color:red;padding: 10px').bind(quiz)
// watch(()=> quiz.title, value => {
//   if(value.length !== 0) dom('#add-question').click(()=> console.log('acceptable'))
// })
dom('#question-form').hide()

dom('#add-question').click(()=> {
  render(()=> {
    if(quiz.title.length !== 0 && quiz.description.length !== 0){
      // console.log('acceptable')
      dom('#question-form').show()
      dom('#warning').hide()
      dom('#save-question').click(()=> {
        if(dom('#question').val().length !== 0 && dom('#opt-a').val().length !== 0 && dom('#opt-b').val().length !== 0 && dom('#opt-c').val().length !== 0 && dom('#opt-d').val().length !== 0){
            quiz.questions.push({
            question: dom('#question').val(),
            optA: dom('#opt-a').val(),
            optB: dom('#opt-b').val(),
            optC: dom('#opt-c').val(),
            optD: dom('#opt-d').val()
          })
          console.log(quiz.questions)
        }else{
          dom('#warning').show()
          quiz.msg = 'Befor saving question add options and question'
        }
      })
      
    }else{
      // console.log('unacceptable')
      dom('#question-form').hide()
      quiz.msg = 'Before adding question you must type title and description'
    }
  })
})