Gå til innhold

Hjelp til å tenke ut noe lurt...


Anbefalte innlegg

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?

Lenke til kommentar
Videoannonse
Annonse
  • 2 uker senere...

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 av Dan-Levi
Lenke til kommentar

Bli med i samtalen

Du kan publisere innhold nå og registrere deg senere. Hvis du har en konto, logg inn nå for å poste med kontoen din.

Gjest
Skriv svar til emnet...

×   Du har limt inn tekst med formatering.   Lim inn uten formatering i stedet

  Du kan kun bruke opp til 75 smilefjes.

×   Lenken din har blitt bygget inn på siden automatisk.   Vis som en ordinær lenke i stedet

×   Tidligere tekst har blitt gjenopprettet.   Tøm tekstverktøy

×   Du kan ikke lime inn bilder direkte. Last opp eller legg inn bilder fra URL.

Laster...
  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...