Hjelp til å tenke ut noe lurt...

[skelld]

Hei

Jeg har kun litt basiskunskap når det gjelder programmering (basic,pyton, osv)

Det jeg trenger er et klikkbasert flytskjema. Er det noen som har en ide på hvordan gjøre dette enklest mulig?

 

Her er ideen i grove trekk:

Du blir presentert med et spørreskjema. Et spørsmål av gangen. Basert på hva du velger, kommer et nye spørsmål. På slutten så samles alt i en rapport basert på hva du har svart. Tenk på det som et flytskjema. Feks:

Har du en bil?

Ja

Er den gammel eller ny?

Ny

Er den Amerikansk eller fra asia?

Amerikansk

Rapport:

Du har en ny amerikansk bil.

 

Noen smarte hoder?

[Enthroner]

https://www.google.no/intl/no/forms/about/

[Dan-Levi]

Hei! Lagde en fiddle med beskrivelse til deg her. Sjekk ut den så du kan teste (trykk på result) og tyde kode samtidig.
 
Limer koden inn som referanse.
 
HTML

<form id="flytskjema">

  <fieldset>
    Har du en bil?<br>
    <input type="radio" name="harBil" value="Ja" checked> Ja<br>
    <input type="radio" name="harBil" value="Nei"> Nei
    <button>Neste</button>
  </fieldset>

  <fieldset hidden>
    Er den gammel eller ny?<br>
    <input type="radio" name="tilstand" value="gammel" checked> Gammel<br>
    <input type="radio" name="tilstand" value="ny"> Ny
    <button>Neste</button>
  </fieldset>

</form>
<p id="svar" hidden>...</p>

JavaScript

$(document).ready(function () {

  let flytSkjema = $(`#flytskjema`),
  svarParagraf = $(`#svar`),
  antallSkjemaSett = flytSkjema.children().length;
  
  const behandleSkjemaDel = function() {
    let gjeldendeSkjemaSett = $(this);
    let gjeldendeSkjemaSettIndex = gjeldendeSkjemaSett.finnIndex();

    // For å gjøre en ekstra sjekk kun du for eksempel sjekke om man er på første side også
    //  ... && gjeldendeSkjemaSettIndex == 1
    if(gjeldendeSkjemaSett.svarteNei()) {
      gjeldendeSkjemaSett.hoppTilResultat();
    }
    
    if(gjeldendeSkjemaSettIndex == antallSkjemaSett) {
      gjeldendeSkjemaSett.hoppTilResultat();
    }

    gjeldendeSkjemaSett.hoppTilNesteSide();

  };
  flytSkjema.on('submit', (e) => {
    e.preventDefault();
  });
 
  $(flytSkjema).on(`click`, 'button', behandleSkjemaDel)
 
  jQuery.fn.extend({

    finnIndex: function() {
      return this
      .parent()
      .index() + 1;
    },

    svarteNei: function() {
      return this
      .siblings('input[type="radio"][name="harBil"]:checked')
      .val() == "Nei";
    },

    hoppTilNesteSide: function() {
       this
      .parent()
      .hide()
      .next()
      .show();
    },

    hoppTilResultat: function() {
      $('form').hide();
      let endeligSvar,
      harBil = $('input[type="radio"][name="harBil"]:checked').val() == "Ja",
      tilstand = $('input[type="radio"][name="tilstand"]:checked').val();
     
      if(harBil) {
       endeligSvar = `Du har en ${tilstand} amerikansk bil`;
      } else {
       endeligSvar = "Her må du gjerne ta over og prøve selv";
      }
     
      svarParagraf
      .text(endeligSvar)
      .show();
    }

  });
});

Endret 12. november 2017 av Dan-Levi