<!DOCTYPE html>
<html>
<head>
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">	
		<style>
		body {
			font-family: 'Roboto', sans-serif;
			text-align: center;
		}
	
		h1 {
			text-align: center;
			color: red;
			font-family: 'Roboto', sans-serif;
		}

		h2 {
			margin-top: 30px;
			font-family: 'Roboto', sans-serif;
		}


		h4 {
			margin-top: 30px;
			font-family: 'Roboto', sans-serif;
			font-size: 33px;
			line-height: 1,2em;
		}
		
			
		.headeins{
		font-size: 28px;
		line-height: 1,2em;
		}


		p {
			font-family: 'Roboto', sans-serif;
			font-weight: bold;
			font-size: 18px;
			margin-top: 20px;
		}

		* {
			padding: 0;
			margin: 0;
			color: #1a1f36;
			box-sizing: border-box;
			word-wrap: break-word;
		  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Ubuntu,sans-serif;
		}


.next{
  background-color: #2eb4a3; /* Hintergrundfarbe */
  border: none; /* Kein Rahmen */
  color: white; /* Textfarbe */
  padding: 15px 32px; /* Innenabstand */
  text-align: center; /* Text zentrieren */
  text-decoration: none; /* Keine Unterstreichung */
  display: inline-block; /* Inline-Block-Element */
  font-size: 16px; /* Schriftgröße */
  margin: 4px 2px; /* Außenabstand */
  cursor: pointer; /* Mauszeiger in Handform */
    border-radius: 6px!important;
}

.prev{
  background-color: #2eb4a3; /* Hintergrundfarbe */
  border: none; /* Kein Rahmen */
  color: white; /* Textfarbe */
  padding: 15px 32px; /* Innenabstand */
  text-align: center; /* Text zentrieren */
  text-decoration: none; /* Keine Unterstreichung */
  display: inline-block; /* Inline-Block-Element */
  font-size: 16px; /* Schriftgröße */
  margin: 4px 2px; /* Außenabstand */
  cursor: pointer; /* Mauszeiger in Handform */
    border-radius: 6px!important;
}

.go{
  background-color: #2eb4a3; /* Hintergrundfarbe */
  border: none; /* Kein Rahmen */
  color: white; /* Textfarbe */
  padding: 15px 32px; /* Innenabstand */
  text-align: center; /* Text zentrieren */
  text-decoration: none; /* Keine Unterstreichung */
  display: inline-block; /* Inline-Block-Element */
  font-size: 16px; /* Schriftgröße */
  margin: 4px 2px; /* Außenabstand */
  cursor: pointer; /* Mauszeiger in Handform */
    border-radius: 6px!important;
}

a {
  color: #2eb4a3;
  text-decoration: unset;
}
.login-root {
    background: #fff;
    display: flex;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}
.loginbackground {
    min-height: 692px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 0;
    overflow: hidden;
}

span {
    display: block;
    font-size: 20px;
    line-height: 28px;
    color: #1a1f36;
}
label {
    margin-bottom: 10px;
}
.reset-pass a,label {
    font-size: 14px;
    font-weight: 600;
    display: block;
}
.reset-pass > a {
    text-align: right;
    margin-bottom: 10px;
}

.field input {
    font-size: 16px;
    line-height: 28px;
    padding: 8px 16px;
    width: 100%;
    min-height: 44px;
    border: unset;
    border-radius: 4px;
    outline-color: rgb(84 105 212 / 0.5);
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

input[type="submit"] {
    background-color: #2eb4a3;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
      border-radius: 6px!important;
}
.field-checkbox input {
    width: 20px;
    height: 15px;
    margin-right: 5px; 
    box-shadow: unset;
    min-height: unset;
      border-radius: 6px!important;
}
.field-checkbox label {
    display: flex;
    align-items: center;
    margin: 0;
      border-radius: 6px!important;
}
a.ssolink {
    display: block;
    text-align: center;
    font-weight: 600;
      border-radius: 6px!important;
}
.footer-link span {
    font-size: 14px;
    text-align: center;
      border-radius: 6px!important;
}
.listing a {
    color: #697386;
    font-weight: 600;
    margin: 0 10px;
      border-radius: 6px!important;
}


input[type="radio"] {
  margin-right: 10px; /* Hier kann der Wert je nach Bedarf angepasst werden */
              cursor: pointer;
                border-radius: 6px!important;

}

.form-control {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.1;
  display: grid;
  grid-template-columns: 1em auto;
    border-radius: 6px!important;
  gap: 0.5em;
}

label{
	font-size: 20px;
	  border-radius: 6px!important;
}

/* Stilregeln für die Radio-Buttons */
input[type="radio"] {
  display: none; /* Das Standard-Radio-Button-Element ausblenden */
    border-radius: 6px!important;
}


/* Stilregeln für die Radio-Buttons */
input[type="radio"] {
  display: none; /* Das Standard-Radio-Button-Element ausblenden */
    border-radius: 6px!important;
  
}


/* Stilregeln für die Radio-Button-Container */
.radio-group {
  display: flex;
  align-items: center;
   padding: 20px;
               cursor: pointer;
  border-radius: 6px!important;
  border: #2eb4a3 4px solid;
}

/* Stilregeln für die Labels */
.radio-group label {
  display: inline-block;
              cursor: pointer;
  border-radius: 6px!important;
  margin-left: 10px; /* Abstand zwischen Radio-Button und Label */
  cursor: pointer;
  padding: 20px;
  
}


input[type="radio"] + label {
    padding: 20px;
  border: black 4px solid;
  color: black;
              cursor: pointer;
  border-radius: 6px!important;
}


/* Stilregeln für die aktivierten Radio-Buttons */
input[type="radio"]:checked + label {
  font-weight: bold;
  color: #2eb4a3;
    padding: 20px;
  border: #2eb4a3 4px solid;
              cursor: pointer;
  border-radius: 6px!important;
}


 /* .next, .prev, .go - Hover- und Active-Zustand */
    .next:hover,
    .prev:hover,
    .go:hover,
    .next:active,
    .prev:active,
    .go:active {
        background-color: #1d7f73; /* Hintergrundfarbe beim Hover und Active-Zustand */
          border-radius: 6px!important;
    }

    /* a - Hover- und Active-Zustand */
    a:hover,
    a:active {
        color: #1d7f73; /* Textfarbe beim Hover und Active-Zustand */
          border-radius: 6px!important;
    }

    /* .field input - Hover- und Active-Zustand */
    .field input:hover,
    .field input:active {
        box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 6px -1px, rgba(0, 0, 0, 0.14) 0px 2px 4px -1px,
            rgba(0, 0, 0, 0.12) 0px 10px 15px -3px; /* Box-Schatten beim Hover und Active-Zustand */
              border-radius: 6px!important;
    }

    /* input[type="submit"] - Hover- und Active-Zustand */
    input[type="submit"]:hover,
    input[type="submit"]:active {
        background-color: #1d7f73; /* Hintergrundfarbe beim Hover und Active-Zustand */
          border-radius: 6px!important;
    }

    /* .radio-group label - Hover- und Active-Zustand */
    .radio-group label:hover,
    .radio-group label:active {
        background-color: #f5f5f5; /* Hintergrundfarbe beim Hover und Active-Zustand */
                    cursor: pointer;
                      border-radius: 6px!important;

    }

    /* input[type="radio"] + label - Hover- und Active-Zustand */
    input[type="radio"] + label:hover,
    input[type="radio"] + label:active {
        border-color: #2eb4a3; /* Randfarbe beim Hover und Active-Zustand */
        background: #2eb4a3;
        color: #ffffff;
                    cursor: pointer;
                      border-radius: 6px!important;

    }


	</style>
</head>

<! --
Antwortm&ouml;glichkeiten:
    PS
    ff
    Mini
    PS + ff
    PS + Mini
    ff + Mini
    PS + ff + Mini

--!>

<body>
	  <div class="login-root">
    <div class="box-root flex-flex flex-direction--column" style="min-height: 100vh;flex-grow: 1;">
      <div class="box-root padding-top--24 flex-flex flex-direction--column" style="flex-grow: 1; z-index: 9;">
        <div class="formbg-outer">
          <div class="formbg">
            <div class="formbg-inner padding-horizontal--48">
		<div class ="container">
		<form method="post" action="result4.php">
	
		<div id="question1" class="question">
			<div class="headeins"><h4>Frage 1</h4> Benutzerführung & Anwendungsqualität:<br/>Wie wichtig ist Ihnen eine intuitive Softwareoberfläche? <br/><br/></div>
			<input type="radio" id="option1" name="q1" value="PS" oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option1">Sehr wichtig</label>
			<input type="radio"  id="option2" name="q1" value="FF, PS, Mini"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option2">Wichtig</label>
			<input type="radio"id="option3"  name="q1" value="PS, FF, Mini"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option3">Weniger wichtig</label>
			<input type="radio"id="option4"  name="q1" value="PS, FF, Mini"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option4">Unwichtig</label><br>
			<button class="next" data-question="question2">Weiter</button>		</div>
		<div id="question2" class="question">
			<div class="headeins"><h4>Frage 2</h4> Fotos von unterwegs hochladen.<br/>Objekte mit dem Smartphone bearbeiten. Wie wichtig ist die mobile Nutzung? <br/><br/> </div>
			<input type="radio"id="option5" name="q2" value="PS" oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option5">Sehr wichtig</label>
			<input type="radio" id="option6"name="q2" value="FF, PS"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option6">Wichtig</label>
			<input type="radio" id="option7"name="q2" value="PS, FF, Mini"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option7">Weniger wichtig</label>
			<input type="radio" id="option8"name="q2" value="PS, FF, Mini"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option8">Unwichtig</label><br>
			<button class="prev" data-question="question1">zurück</button>
			<button class="next" data-question="question3">Weiter</button>		</div>
		<div id="question3" class="question">
			<div class="headeins"><h4>Frage 3</h4> Microsoft O365, Outlook und Co.:<br/>Wie wichtig ist für Sie eine kompatible Schnittstelle mit den gängigen Business-Lösungen? <br/><br/> </div>
			<input type="radio" id="option9" name="q3" value="PS"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option9">Sehr wichtig</label>
			<input type="radio"  id="option10" name="q3" value="PS"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option10">Wichtig</label>
			<input type="radio"id="option11"  name="q3" value="PS,FF"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option11">Weniger wichtig</label>
			<input type="radio"id="option12"  name="q3" value="PS,FF"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option12">Unwichtig</label><br>						<button class="prev" data-question="question2">zurück</button>

			<button class="next" data-question="question4">Weiter</button>		</div>
		<div id="question4" class="question">
			<div class="headeins"><h4>Frage 4</h4> Exposéversand nach DSGVO:<br/>Welche Rolle spielt die Datensicherheit Ihrer Daten und die der Kund:innen? <br/> <br/></div>
			<input type="radio" id="option13" name="q4" value="PS" oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option13">Sehr wichtig</label>
			<input type="radio"  id="option14" name="q4" value="PS,FF"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option14">Wichtig</label>
			<input type="radio"id="option15"  name="q4" value="PS, FF"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option15">Weniger wichtig</label>
			<input type="radio"id="option16"  name="q4" value="PS, FF, Mini"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option16">Unwichtig</label><br>							<button class="prev" data-question="question3">zurück</button>

			<button class="next" data-question="question5">Weiter</button>		</div>
		<div id="question5" class="question">
			<div class="headeins"><h4>Frage 5</h4> Immobiliengeschäfte mit Rechtssicherheit:<br/>Wie wichtig sind Ihnen einwandfreie Vorlagen und Prozesse? <br/><br/> </div>
			<input type="radio" id="option17" name="q5" value="FF" oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option17">Sehr wichtig</label>
			<input type="radio"  id="option18" name="q5" value="PS,FF"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option18">Wichtig</label>
			<input type="radio"id="option19"  name="q5" value="PS, FF, Mini"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option19">Weniger wichtig</label>
			<input type="radio"id="option20"  name="q5" value="PS, FF, Mini"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option20">Unwichtig</label><br>	
						<button class="prev" data-question="question4">zurück</button>

			<button class="next" data-question="question6">Weiter</button>		</div>
		<div id="question6" class="question">
			<div class="headeins"><h4>Frage 6</h4>  Leichte Migration. Schnelle Einführung:<br/>Wie bewerten Sie kostenfreien Support und regelmäßige Schulungen? <br/><br/> </div>
				<input type="radio" id="option21" name="q6" value="FF"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option21">Sehr wichtig</label>
			<input type="radio"  id="option22" name="q6" value="PS, FF, Mini"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option22">Wichtig</label>
			<input type="radio"id="option23"  name="q6" value="PS, FF"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option23">Weniger wichtig</label>
			<input type="radio"id="option24"  name="q6" value="PS, FF, Mini"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option24">Unwichtig</label><br>							<button class="prev" data-question="question5">zurück</button>

			<button class="next" data-question="question7">Weiter</button>		</div>
		<div id="question7" class="question">
			<div class="headeins"><h4>Frage 7</h4> Systemerweiterung analog zum Unternehmenswachstum:<br/>Sind skalierbare Strukturen und Prozessen für Sie von Bedeutung? <br/><br/> </div>
			<input type="radio" id="option25" name="q7" value="PS"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option25">Sehr wichtig</label>
			<input type="radio"  id="option26" name="q7" value="FF, PS"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option26">Wichtig</label>
			<input type="radio"id="option27"  name="q7" value="PS, FF"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option27">Weniger wichtig</label>
			<input type="radio"id="option28"  name="q7" value="PS, FF, Mini"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option28">Unwichtig</label><br>
						<button class="prev" data-question="question6">zurück</button>
			<button class="next" data-question="question8">Weiter</button>		</div>
		<div id="question8" class="question">
			<div class="headeins"><h4>Frage 8</h4> Automatisierte Prozesse mit Planungssicherheit:<br/>Wie wichtig sind Ihnen transparente Vertragsmodelle ohne Zusatzkosten? <br/><br/> </div>
			<input type="radio" id="option29" name="q8" value="PS"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option29">Sehr wichtig</label>
			<input type="radio"  id="option30" name="q8" value="PS"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option30">Wichtig</label>
			<input type="radio"id="option31"  name="q8" value="PS,FF"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option31">Weniger wichtig</label>
			<input type="radio"id="option32"  name="q8" value="FF, PS, Mini"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option32">Unwichtig</label><br>
						<button class="prev" data-question="question7">zurück</button>
			<button class="next" data-question="question9">Weiter</button>		</div>
			
			
		<div id="question9" class="question">
			<div class="headeins"><h4>Frage 9</h4> Individuelle Funktionen und Verknüpfungen:<br/>Wie wichtig ist es für Ihr Unternehmen, dass die Maklersoftware anpassbar ist? <br/> <br/></div>
			<input type="radio" id="option33" name="q9" value="PS"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option33">Sehr wichtig</label>
			<input type="radio"  id="option34" name="q9" value="FF, PS, Mini"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option34">Wichtig</label>
			<input type="radio"id="option35"  name="q9" value="PS, FF, Mini"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option35">Weniger wichtig</label>
			<input type="radio"id="option36"  name="q9" value="FF, PS, Mini"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option36">Unwichtig</label><br>						<button class="prev" data-question="question8">zurück</button>

			<button class="next" data-question="question10">Weiter</button>		</div>
			
					
				<div id="question10" class="question">
			<div class="headeins"><h4>Frage 10</h4> Wie groß ist Ihr Unternehmen?<br/><br/><br/></div>
			<input type="radio" id="option37" name="q10" value="Mini"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option37">Einzelunternehmen</label>
			<input type="radio"  id="option38" name="q10" value="FF"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option38">Kleinunternehmen	</label>
			<input type="radio"id="option39"  name="q10" value="PS, FF"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option39">Mittelständisches Unternehmen</label>
			<input type="radio"id="option40"  name="q10" value="PS"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option40">Großunternehmen</label><br>						<button class="prev" data-question="question9">zurück</button>

			<button class="next" data-question="question11">Weiter</button>		</div>

						
		<div id="question11" class="question">
			<div class="headeins"><h4>Frage 11</h4> In welchem Bereich sind Sie schwerpunktmäßig tätig?<br/><br/><br/></div>
			<input type="radio" id="option41" name="q11" value="PS, FF"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option41">Vermietung</label>
			<input type="radio"  id="option42" name="q11" value="PS, FF"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option42">Verkauf</label>
			<input type="radio"id="option43"  name="q11" value="PS"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option43">Gewerbe</label>
			<input type="radio"id="option44"  name="q11" value="PS"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option44">Neubau</label><br>						<button class="prev" data-question="question9">zurück</button>
			<button class="next" data-question="question12">Weiter</button>		</div>
<div id="question12" class="question">
			<div class="headeins"><h2>Vielen Dank. <br/><br/>Mit dem Klick auf „Absenden“ erhalten Sie automatisch Ihre persönliche CRM-Empfehlung. </h2><br/></div>
								<button class="prev" data-question="question11">zurück</button>
			<button class="go" type="submit">Absenden</button>
		</div>
				</form>		

	</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  
 <script>
    const form = document.querySelector('#form');
    const questions = document.querySelectorAll('.question');
    const nextBtns = document.querySelectorAll('.next');
    const prevBtns = document.querySelectorAll('.prev');
    let currentQuestionIndex = 0;

    function showQuestion(index) {
        questions.forEach((question, idx) => {
            if (idx === index) {
                question.style.display = 'block';
            } else {
                question.style.display = 'none';
            }
        });
    }

    function moveToNextQuestion() {
        if (currentQuestionIndex < questions.length - 1) {
            currentQuestionIndex++;
            showQuestion(currentQuestionIndex);
        } else {
            // Submit the form when all questions are answered
            form.submit();
        }
    }

    nextBtns.forEach((btn, index) => {
        btn.addEventListener('click', e => {
            e.preventDefault();
            const currentQuestion = btn.parentNode;
            const radioButtons = currentQuestion.querySelectorAll('input[type="radio"]');
            let selected = false;

            radioButtons.forEach(rb => {
                if (rb.checked) {
                    selected = true;
                }
            });

            if (selected) {
                moveToNextQuestion();
            } else {
                alert('Bitte wählen Sie eine Antwort aus, bevor Sie fortfahren.');
            }
        });
    });

    prevBtns.forEach((btn, index) => {
        btn.addEventListener('click', e => {
            e.preventDefault();
            if (currentQuestionIndex > 0) {
                currentQuestionIndex--;
                showQuestion(currentQuestionIndex);
            }
        });
    });

    questions.forEach((question, index) => {
        const radioButtons = question.querySelectorAll('input[type="radio"]');
        radioButtons.forEach(rb => {
            rb.addEventListener('change', moveToNextQuestion);
        });
    });

    showQuestion(currentQuestionIndex);
</script>


</body>
</html>


<?php
    // Auslesen der Antworten aus dem Formular
    $q1 = $_POST['q1'];
    $q2 = $_POST['q2'];
    $q3 = $_POST['q3'];
    $q4 = $_POST['q4'];
    $q5 = $_POST['q5'];
    $q6 = $_POST['q6'];
    $q7 = $_POST['q7'];
    $q8 = $_POST['q8'];
    $q9 = $_POST['q9'];
    $q10 = $_POST['q10'];
    $q11 = $_POST['q11'];

    // Auswerten der Antworten und Berechnung des Ergebni&szlig; es
    $result = "";
    $a_count = 0;
    $b_count = 0;
    $c_count = 0;
    $d_count = 0;

    switch ($q1) {
        case "a":
            $a_count++;
            break;
        case "b":
            $b_count++;
            break;
        case "c":
            $c_count++;
            break;
        case "d":
            $d_count++;
            break;
    }

    switch ($q2) {
        case "a":
            $a_count++;
            break;
        case "b":
            $b_count++;
            break;
        case "c":
            $c_count++;
            break;
        case "d":
            $d_count++;
            break;
    }

    switch ($q3) {
        case "a":
            $a_count++;
            break;
        case "b":
            $b_count++;
            break;
        case "c":
            $c_count++;
            break;
        case "d":
            $d_count++;
            break;
    }

    switch ($q4) {
        case "a":
            $a_count++;
            break;
        case "b":
            $b_count++;
            break;
        case "c":
            $c_count++;
            break;
        case "d":
            $d_count++;
            break;
    }
    
    
     switch ($q5) {
        case "a":
            $a_count++;
            break;
        case "b":
            $b_count++;
            break;
        case "c":
            $c_count++;
            break;
        case "d":
            $d_count++;
            break;
    }
   
    
     switch ($q6) {
        case "a":
            $a_count++;
            break;
        case "b":
            $b_count++;
            break;
        case "c":
            $c_count++;
            break;
        case "d":
            $d_count++;
            break;
    }
    
     switch ($q7) {
        case "a":
            $a_count++;
            break;
        case "b":
            $b_count++;
            break;
        case "c":
            $c_count++;
            break;
        case "d":
            $d_count++;
            break;
    }
    
     switch ($q8) {
        case "a":
            $a_count++;
            break;
        case "b":
            $b_count++;
            break;
        case "c":
            $c_count++;
            break;
        case "d":
            $d_count++;
            break;
    }
    
     switch ($q9) {
        case "a":
            $a_count++;
            break;
        case "b":
            $b_count++;
            break;
        case "c":
            $c_count++;
            break;
        case "d":
            $d_count++;
            break;
    }
    
     switch ($q10) {
        case "a":
            $a_count++;
            break;
        case "b":
            $b_count++;
            break;
        case "c":
            $c_count++;
            break;
        case "d":
            $d_count++;
            break;
    }
    
         switch ($q11) {
        case "a":
            $a_count++;
            break;
        case "b":
            $b_count++;
            break;
        case "c":
            $c_count++;
            break;
        case "d":
            $d_count++;
            break;
    }
    

    $max_count = max($a_count, $b_count, $c_count, $d_count);

    if ($max_count == $a_count) {
        $result = "";
    } elseif ($max_count == $b_count) {
        $result = "Antwort B ist die richtige Wahl!";
    } elseif ($max_count == $c_count) {
        $result = "Antwort C ist die richtige Wahl!";
    } elseif ($max_count == $d_count) {
        $result = "Antwort D ist die richtige Wahl!";
    }
?>