<!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;
			padding: 0px;
			background-color: #0c2d44!important;
		}
		htmnl{
			background-color: #0c2d44!important;
		}
	
		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: #fff;
			box-sizing: border-box;
			word-wrap: break-word;
		  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Ubuntu,sans-serif;
		}


.next{
  background-color: #afcb20; /* 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: #afcb20; /* 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: #afcb20; /* 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: #afcb20;
  text-decoration: unset;
}
.login-root {
    background-color: #0c2d44!important;
    display: flex;
    width: 100%;
    
    overflow: hidden;
}
.loginbackground {
    min-height: 692px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 0;
    overflow: hidden;
    background-color: #0c2d44!important;
}

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: #fff;
    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: #afcb20;
    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: #fff;
    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: #fff 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: #fff 4px solid;
  color: #fff;
              cursor: pointer;
  border-radius: 6px!important;
}


/* Stilregeln für die aktivierten Radio-Buttons */
input[type="radio"]:checked + label {
  font-weight: bold;
  color: #afcb20;
    padding: 20px;
  border: #afcb20 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: #afcb20; /* Hintergrundfarbe beim Hover und Active-Zustand */
          border-radius: 6px!important;
      border: 2px solid #fff;
    }
    
    .goabsenden{
  background-color: #e6007c; /* 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;
}
    
     .goabsenden a,
    .goabsenden:hover,
    .goabsenden:active {
        background-color: #e6007c; /* Hintergrundfarbe beim Hover und Active-Zustand */
          border-radius: 6px!important;
      border: 2px solid #fff;
    }
    
    
      .goabsenden a:hover,
     .goabsenden a:active {
        color: #1d7f73; /* Textfarbe 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: #afcb20; /* Randfarbe beim Hover und Active-Zustand */
        background: #afcb20;
        color: #ffffff;
                    cursor: pointer;
                      border-radius: 6px!important;

    }


	</style>
</head>


<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="result6.php">
	
		<div id="question1" class="question">
			<div class="headeins"><h4>Frage 1</h4>Auf welche Frage würdest du am liebsten eine ausführliche Antwort erhalten? <br/><br/></div>
			<input type="radio" id="option1" name="q1" value="IBW" oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option1">Wodurch entsteht Inflation?</label>
			<input type="radio"  id="option2" name="q1" value="PSY"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option2">Wie entstehen psychische Erkrankungen?</label>
			<input type="radio"id="option3"  name="q1" value="WP"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option3">Warum kaufen wir so viel?</label>
			<input type="radio"id="option4"  name="q1" value="SMM"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option4">Was ist ein Influencer /-in?</label><br>
			<button class="next" data-question="question2">Weiter</button>		</div>
		<div id="question2" class="question">
			<div class="headeins"><h4>Frage 2</h4>Zu welchem Thema würdest du dir am ehesten einen Podcast anhören? <br/><br/> </div>
			<input type="radio"id="option5" name="q2" value="PSY" oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option5">True Crime: Serienmörder /-innen – Warum begehen Menschen Morde?</label>
			<input type="radio" id="option6"name="q2" value="IBW"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option6">Kryptowährungen: Das Phänomen Bitcoin – Was ist das eigentlich?</label>
			<input type="radio" id="option7"name="q2" value="WP"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option7">Marketing: Die 10 bekanntesten Marken der Welt – Warum haben sie Erfolg?</label>
			<input type="radio" id="option8"name="q2" value="SMM"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option8">Influencermarketing: Beeinflussung durch Social Media – Wie wird man zum Influencer /-in?</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>Welche Beschreibung trifft eher auf dich zu?<br/><br/> </div>
			<input type="radio" id="option9" name="q3" value="IBW"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option9">Sachlich, rechnerisch, analytisch</label>
			<input type="radio"  id="option10" name="q3" value="PSY"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option10">Empathisch, hilfsbereit, kommunikativ</label>
			<input type="radio"id="option11"  name="q3" value="WP"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option11">Analytisch, kommunikativ, flexibel</label>
			<input type="radio"id="option12"  name="q3" value="SMM"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option12">Ästhetisch, digital, kommunikativ</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>Du musst einen Aufsatz zum Thema „zuckerhaltige Nahrungsmittel“ schreiben. Welchen Titel würdest du für deinen Aufsatz auswählen?<br/> <br/></div>
			<input type="radio" id="option13" name="q4" value="IBW" oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option13">Nestle – Große Umsätze durch geringe Löhne in armen Ländern</label>
			<input type="radio"  id="option14" name="q4" value="WP"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option14">Süßigkeitenwerbung auf Kinderkanälen – Ist das noch normal?</label>
			<input type="radio"id="option15"  name="q4" value="PSY"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option15">Zuckersucht – Warum werden Menschen zuckerabhängig?</label>
			<input type="radio"id="option16"  name="q4" value="SMM "  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option16">Zucker auf Twitch – Wie Influencer Energydrinks normalisieren</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>In welchen Bereichen siehst du deine Zukunft?<br/><br/> </div>
			<input type="radio" id="option17" name="q5" value="PSY" oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option17">Coaching, Therapie, Soziales</label>
			<input type="radio"  id="option18" name="q5" value="IBW"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option18">Management, Controlling, Vertrieb</label>
			<input type="radio"id="option19"  name="q5" value="WP"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option19">Marketing, Werbeagentur, Unternehmensberatung</label>
			<input type="radio"id="option20"  name="q5" value="SMM"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option20">Onlinemarketing, Social Media, Werbemanagement</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>Welches Buch würdest du am liebsten lesen?<br/><br/> </div>
				<input type="radio" id="option21" name="q6" value="IBW"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option21">Globalisierte Märkte – Die Welt steht im stetigen Austausch</label>
			<input type="radio"  id="option22" name="q6" value="PSY"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option22">Psychosomatik – Wie ein erkrankter Geist den Körper beeinflussen kann</label>
			<input type="radio"id="option23"  name="q6" value="WP"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option23">Markenloyalität – Die Tendenz immer das Gleiche zu kaufen</label>
			<input type="radio"id="option24"  name="q6" value="SMM"  oninvalid="this.setCustomValidity('W&auml;hlen Sie aus unseren vier Auswahlm&ouml;glichkeiten aus')"><label for="option24">Social Media – Ein neues Maß an Einflussnahme</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"><h2>Vielen Dank. <br/><br/>Klick auf Absenden und warte kurz voller Spannung auf dein Test-Ergebnis!
</h2><br/></div>
								<button class="prev" data-question="question6">zurück</button>
			<button class="goabsenden" 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!";
    }
?>