NOVEXPERT
Welches NOVEXPERT Ritual passt zu deiner Haut?
Beantworte ein paar kurze Fragen zu deiner Haut und finde heraus,
welches NOVEXPERT Ritual am besten zu deinen aktuellen Hautbedürfnissen passt.
Quiz starten
Frage 1 von 5 20 %
FRAGE 1
Zurück
Weiter
NOVEXPERT
DEIN ERGEBNIS
Dein perfektes NOVEXPERT Ritual
Dieses NOVEXPERT Ritual passt am besten zu deinen aktuellen Hautbedürfnissen.
Ritual entdecken
(function () {
/* =======================================================
HIER BILDER UND SET-LINKS EINFÜGEN
======================================================= */
const ritualData = {
zinc: {
title: "Dein Ritual: Trio-Zink",
text:
"Deine Haut neigt zu Unreinheiten, Pickeln oder einem unausgeglichenen Hautbild. Das NOVEXPERT Trio-Zink Ritual unterstützt eine gezielte Pflegeroutine für unreine Haut und hilft dabei, das Hautbild klarer und ausgeglichener wirken zu lassen.",
color: "#51baad",
buttonText: "Trio-Zink Ritual entdecken",
image: "https://cdn02.plentyone.com/viot5jxvarl6/frontend/novexpert/Routinen/01_Startseiten/Trio-Zink.png",
link: "https://www.novexpert.de/problemloeser/unreine-haut-akne/ritual-fuer-unreine-haut-akne_4829_5790/"
},
hyaluron: {
title: "Dein Ritual: Hyaluron",
text:
"Deine Haut benötigt vor allem Feuchtigkeit und eine Pflege, die sie praller und geglätteter wirken lässt. Das NOVEXPERT Hyaluron Ritual eignet sich besonders für feuchtigkeitsarme Haut und erste Fältchen.",
color: "#be2664",
buttonText: "Hyaluron Ritual entdecken",
image: "https://cdn02.plentyone.com/viot5jxvarl6/frontend/novexpert/Routinen/01_Startseiten/Hyaluron.jpeg",
link: "https://www.novexpert.de/problemloeser/feine-faeltchen-feuchtigkeitsarme-haut/ritual-fuer-feine-faeltchen-feuchtigkeitsarme-haut_4830_5791/"
},
vitaminc: {
title: "Dein Ritual: Vitamin C",
text:
"Deiner Haut fehlt aktuell vor allem Frische und Ausstrahlung. Das NOVEXPERT Vitamin C Ritual unterstützt einen frischer und strahlender wirkenden Teint und eignet sich besonders bei fahler und müde wirkender Haut.",
color: "#ec7802",
buttonText: "Vitamin C Ritual entdecken",
image: "https://cdn02.plentyone.com/viot5jxvarl6/frontend/novexpert/Routinen/01_Startseiten/Vitamin_C.png",
link: "https://www.novexpert.de/problemloeser/fahler-teint/ritual-fuer-fahlen-tein-vitamin-c_4832_5793/"
},
proretinol: {
title: "Dein Ritual: Pro-Retinol",
text:
"Du möchtest sichtbaren Zeichen der Hautalterung entgegenwirken und wünschst dir ein glatteres, fester und ebenmäßiger wirkendes Hautbild. Das NOVEXPERT Pro-Retinol Ritual ergänzt deine Pflegeroutine mit gezielter Pflege für reifer wirkende Haut.",
color: "#614b79",
buttonText: "Pro-Retinol Ritual entdecken",
image: "", // HIER BILD-URL DES PRO-RETINOL-SETS EINFUEGEN
link: "https://www.novexpert.de/problemloeser/regeneration-zellerneuerung/ritual-fuer-regeneration-zellerneuerung_4844_5805/"
}
};
/* =======================================================
FRAGEN
======================================================= */
const questions = [
{
question: "Wie würdest du deine Haut aktuell beschreiben?",
answers: [
{
text: "Ich habe häufig Pickel, Mitesser oder Hautunreinheiten.",
type: "zinc"
},
{
text: "Meine Haut fühlt sich oft trocken oder feuchtigkeitsarm an.",
type: "hyaluron"
},
{
text: "Meine Haut wirkt müde, fahl oder glanzlos.",
type: "vitaminc"
},
{
text: "Ich bemerke erste deutlichere Falten oder nachlassende Hautfestigkeit.",
type: "proretinol"
}
]
},
{
question: "Was möchtest du mit deiner Hautpflege hauptsächlich erreichen?",
answers: [
{
text: "Unreinheiten reduzieren und das Hautbild klären.",
type: "zinc"
},
{
text: "Meine Haut intensiv mit Feuchtigkeit versorgen und kleine Fältchen glätten.",
type: "hyaluron"
},
{
text: "Meinen Teint zum Strahlen bringen und frischer aussehen lassen.",
type: "vitaminc"
},
{
text: "Mein Hautbild glätten und die Haut straffer wirken lassen.",
type: "proretinol"
}
]
},
{
question: "Welches Hautproblem beschäftigt dich aktuell am meisten?",
answers: [
{
text: "Vergrößerte Poren, Pickel und Unreinheiten.",
type: "zinc"
},
{
text: "Spannungsgefühle, Trockenheitsfältchen oder fehlende Feuchtigkeit.",
type: "hyaluron"
},
{
text: "Ein ungleichmäßiger, fahler oder müder Teint.",
type: "vitaminc"
},
{
text: "Sichtbare Falten, nachlassende Elastizität oder weniger Spannkraft.",
type: "proretinol"
}
]
},
{
question: "Wie fühlt sich deine Haut nach der Reinigung häufig an?",
answers: [
{
text: "Sie wird schnell wieder ölig oder neigt zu Unreinheiten.",
type: "zinc"
},
{
text: "Sie spannt oder fühlt sich trocken an.",
type: "hyaluron"
},
{
text: "Sie fühlt sich grundsätzlich normal an, wirkt aber oft müde und glanzlos.",
type: "vitaminc"
},
{
text: "Sie fühlt sich normal an, aber ich bemerke zunehmend Falten und weniger Festigkeit.",
type: "proretinol"
}
]
},
{
question: "Welches Ergebnis wünschst du dir von deiner Pflegeroutine?",
answers: [
{
text: "Reinere und ausgeglichenere Haut.",
type: "zinc"
},
{
text: "Aufgepolsterte, intensiv durchfeuchtete Haut.",
type: "hyaluron"
},
{
text: "Einen frischen, ebenmäßigen und strahlenden Teint.",
type: "vitaminc"
},
{
text: "Glattere, fester und jugendlicher wirkende Haut.",
type: "proretinol"
}
]
}
];
const startPage = document.getElementById("ne-start");
const quizPage = document.getElementById("ne-quiz");
const resultPage = document.getElementById("ne-result");
const startButton = document.getElementById("ne-start-button");
const questionTitle = document.getElementById("ne-question-title");
const questionSmall = document.getElementById("ne-question-small");
const answersContainer = document.getElementById("ne-answers");
const nextButton = document.getElementById("ne-next-button");
const backButton = document.getElementById("ne-back-button");
const questionCount = document.getElementById("ne-question-count");
const progressPercent = document.getElementById("ne-progress-percent");
const progressBar = document.getElementById("ne-progress-bar");
const resultLine = document.getElementById("ne-result-line");
const resultTitle = document.getElementById("ne-result-title");
const resultText = document.getElementById("ne-result-text");
const resultImage = document.getElementById("ne-result-image");
const resultImageLink = document.getElementById("ne-result-image-link");
const resultMainButton = document.getElementById("ne-result-main-button");
const discoverButton = document.getElementById("ne-discover-button");
const restartButton = document.getElementById("ne-restart-button");
let currentQuestion = 0;
let selectedAnswers =
new Array(questions.length).fill(null);
startButton.addEventListener("click", function () {
startPage.style.display = "none";
resultPage.style.display = "none";
quizPage.style.display = "block";
currentQuestion = 0;
renderQuestion();
scrollToQuiz();
});
function renderQuestion() {
const current = questions[currentQuestion];
const questionNumber = currentQuestion + 1;
const percentage =
Math.round(
(questionNumber / questions.length) * 100
);
questionTitle.textContent = current.question;
questionSmall.textContent =
"FRAGE " + questionNumber;
questionCount.textContent =
"Frage " + questionNumber + " von " + questions.length;
progressPercent.textContent =
percentage + " %";
progressBar.style.width =
percentage + "%";
answersContainer.innerHTML = "";
current.answers.forEach(function (answer) {
const button =
document.createElement("button");
button.type = "button";
button.textContent = answer.text;
button.setAttribute("data-type", answer.type);
button.style.width = "100%";
button.style.appearance = "none";
button.style.background = "#161616";
button.style.color = "#ffffff";
button.style.border = "1px solid #373737";
button.style.borderRadius = "15px";
button.style.padding = "20px 22px";
button.style.fontSize = "16px";
button.style.lineHeight = "1.45";
button.style.textAlign = "left";
button.style.cursor = "pointer";
button.style.minHeight = "65px";
button.style.boxSizing = "border-box";
if (answer.type === "zinc") {
button.style.borderLeft =
"6px solid #51baad";
}
if (answer.type === "hyaluron") {
button.style.borderLeft =
"6px solid #be2664";
}
if (answer.type === "vitaminc") {
button.style.borderLeft =
"6px solid #ec7802";
}
if (answer.type === "proretinol") {
button.style.borderLeft =
"6px solid #614b79";
}
if (
selectedAnswers[currentQuestion] === answer.type
) {
button.style.background = "#2a2a2a";
button.style.borderTopColor = "#ffffff";
button.style.borderRightColor = "#ffffff";
button.style.borderBottomColor = "#ffffff";
}
button.addEventListener("click", function () {
selectAnswer(answer.type, button);
});
answersContainer.appendChild(button);
});
applyResponsiveLayout();
nextButton.disabled =
selectedAnswers[currentQuestion] === null;
if (nextButton.disabled) {
nextButton.style.opacity = "0.3";
nextButton.style.cursor = "default";
} else {
nextButton.style.opacity = "1";
nextButton.style.cursor = "pointer";
}
if (
currentQuestion === questions.length - 1
) {
nextButton.textContent =
"Ergebnis anzeigen";
} else {
nextButton.textContent =
"Weiter";
}
backButton.style.display =
currentQuestion > 0
? "inline-block"
: "none";
}
function selectAnswer(type, selectedButton) {
selectedAnswers[currentQuestion] = type;
const answerButtons =
answersContainer.querySelectorAll("button");
answerButtons.forEach(function (button) {
button.style.background = "#161616";
button.style.borderTopColor = "#373737";
button.style.borderRightColor = "#373737";
button.style.borderBottomColor = "#373737";
});
selectedButton.style.background = "#2a2a2a";
selectedButton.style.borderTopColor = "#ffffff";
selectedButton.style.borderRightColor = "#ffffff";
selectedButton.style.borderBottomColor = "#ffffff";
nextButton.disabled = false;
nextButton.style.opacity = "1";
nextButton.style.cursor = "pointer";
}
nextButton.addEventListener("click", function () {
if (
selectedAnswers[currentQuestion] === null
) {
return;
}
if (
currentQuestion < questions.length - 1
) {
currentQuestion++;
renderQuestion();
scrollToQuiz();
} else {
showResult();
}
});
backButton.addEventListener("click", function () {
if (currentQuestion > 0) {
currentQuestion--;
renderQuestion();
scrollToQuiz();
}
});
function calculateResult() {
const scores = {
zinc: 0,
hyaluron: 0,
vitaminc: 0,
proretinol: 0
};
selectedAnswers.forEach(function (answer) {
if (answer) {
scores[answer]++;
}
});
const highestScore =
Math.max(
scores.zinc,
scores.hyaluron,
scores.vitaminc,
scores.proretinol
);
const possibleResults =
Object.keys(scores).filter(function (key) {
return scores[key] === highestScore;
});
if (possibleResults.length > 1) {
for (
let i = selectedAnswers.length - 1;
i >= 0;
i--
) {
if (
possibleResults.indexOf(
selectedAnswers[i]
) !== -1
) {
return selectedAnswers[i];
}
}
}
return possibleResults[0];
}
function showResult() {
const resultKey = calculateResult();
const data = ritualData[resultKey];
quizPage.style.display = "none";
startPage.style.display = "none";
resultPage.style.display = "block";
resultLine.style.background =
data.color;
resultTitle.textContent =
data.title;
resultTitle.style.color =
data.color;
resultText.textContent =
data.text;
resultImageLink.style.display = data.image ? "block" : "none";
resultImage.src = data.image || "";
resultImage.alt =
data.title + " – NOVEXPERT";
resultImageLink.href =
data.link;
resultMainButton.href =
data.link;
discoverButton.href =
data.link;
resultMainButton.textContent =
data.buttonText;
resultMainButton.style.background =
data.color;
scrollToQuiz();
}
restartButton.addEventListener("click", function () {
selectedAnswers =
new Array(questions.length).fill(null);
currentQuestion = 0;
resultPage.style.display = "none";
quizPage.style.display = "block";
renderQuestion();
scrollToQuiz();
});
// Mobile Darstellung ohne style-Tag: alle Anpassungen direkt am Element.
function applyResponsiveLayout() {
const root = document.getElementById("novexpert-skin-quiz");
if (!root) return;
const narrow = window.innerWidth <= 640;
const tiny = window.innerWidth <= 390;
function set(id, styles) {
const element = document.getElementById(id);
if (element) Object.keys(styles).forEach(function(key) { element.style[key] = styles[key]; });
}
root.style.margin = narrow ? "15px auto" : "30px auto";
root.style.padding = tiny ? "0 6px" : narrow ? "0 10px" : "0 15px";
["ne-start", "ne-quiz", "ne-result"].forEach(function(id) {
set(id, {padding: tiny ? "28px 15px" : narrow ? "34px 20px" : (id === "ne-start" ? "70px 50px" : "50px"), borderRadius: narrow ? "18px" : "24px", maxWidth: "100%"});
});
const startHeading = document.querySelector("#ne-start h2");
const resultHeading = document.querySelector("#ne-result h2");
[startHeading, resultHeading].forEach(function(el) {if(el) {el.style.fontSize = narrow ? "clamp(25px, 7vw, 34px)" : "clamp(28px, 5vw, 46px)";el.style.lineHeight=narrow?"1.2":"1.1";}});
set("ne-question-title", {fontSize: narrow ? "clamp(24px, 6.5vw, 32px)" : "clamp(27px, 5vw, 40px)", lineHeight: narrow ? "1.23" : "1.15"});
set("ne-result-title", {fontSize: narrow ? "clamp(24px, 6.5vw, 32px)" : "clamp(26px, 4vw, 38px)"});
["#ne-start p", "#ne-result p"].forEach(function(sel) {document.querySelectorAll(sel).forEach(function(el) {el.style.fontSize=narrow?"15px":"17px"; el.style.lineHeight=narrow?"1.6":"1.65";});});
set("ne-answers", {gap: narrow ? "10px" : "13px", marginTop: narrow ? "22px" : "30px"});
document.querySelectorAll("#ne-answers button").forEach(function(el) {el.style.minHeight=narrow?"58px":"65px";el.style.padding=narrow?"16px 15px":"20px 22px";el.style.fontSize=narrow?"15px":"16px";el.style.borderRadius=narrow?"12px":"15px";});
["ne-back-button", "ne-next-button"].forEach(function(id) {set(id, {minHeight: narrow ? "52px" : "54px",padding:tiny?"12px 14px":narrow?"13px 18px":"15px 32px",fontSize:narrow?"14px":"15px"});});
set("ne-result-image-link", {margin:narrow?"22px auto":"35px auto 30px",borderRadius:narrow?"12px":"20px"});
set("ne-result-main-button", {padding:narrow?"17px 18px":"19px 25px",minHeight:narrow?"55px":"60px",fontSize:narrow?"15px":"16px"});
["ne-restart-button", "ne-discover-button"].forEach(function(id) {set(id,{flex:narrow?"1 1 100%":"1 1 250px",minHeight:narrow?"52px":"54px"});});
}
window.addEventListener("resize", applyResponsiveLayout);
applyResponsiveLayout();
function scrollToQuiz() {
const quiz =
document.getElementById("novexpert-skin-quiz");
if (!quiz) {
return;
}
window.setTimeout(function () {
quiz.scrollIntoView({
behavior: window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth",
block: "start"
});
}, 100);
}
})();