Как создать квиз за 10 минут | Мощный квиз лендинг на конструкторе

Любому бизнесу необходим продающий сайт. Именно поэтому важно применять квиз маркетинг в интернете. В этой инструкции я покажу, как создать квиз с нуля самостоятельно без программирования.

Создать квиз на Creatium (бесплатно 30 дней): https://stasbykov.ru/kviz

Авто пролистывание

<script type="text/javascript">
cr.api(page => {
  page.waitForAppear('[data-isquiz="true"] .cr-field', field => {
    const apiField = page.getComponent(field)
    const type = field.querySelector('[cr-field]').getAttribute('cr-field')

    if (type === 'checkbox-visual'|| type === 'checkbox-list' || apiField.type) return
    
    const quiz = field.closest('.cr-form')
    const wrapper = quiz.querySelector('.swiper-wrapper')
    const steps = [...wrapper.childNodes]
    const fieldStep = field.closest('.swiper-slide')
    const stepIdx = steps.findIndex(step => step === fieldStep)
    const isLastStep = stepIdx === steps.length - 1

    if (isLastStep) return

    let value = apiField.value

    field.addEventListener('click', () => {
      setTimeout(() => {
        if (apiField.value === value) return

        value = apiField.value

        if (!value && !value[0] && !value[Object.keys(value)[0]]) return
        
        apiField.form.submit()
      }, 0)
    })
  })
})
</script>

Выравнивание полей

[cr-field="checkbox-visual"] .items,
[cr-field="radio-visual"] .items {
   justify-content: left !important; /* положение */
}

[cr-field="checkbox-visual"] .item + .item,
[cr-field="radio-visual"] .item + .item {
   margin-left: 35px; /* отступ между вариантами */
}

Формула

if (service==10) {
size*2000
} else if (service==20) {
size*4000
} else if (service==30) {
size*6000
}