Test Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Station Selector</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}
.card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-header {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 15px;
}
.card-content {
margin-bottom: 15px;
}
.radio-group {
display: flex;
flex-direction: column;
}
.radio-option {
margin-bottom: 10px;
}
button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #0056b3;
}
.recommendations {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.recommendation-item {
border: 1px solid #ddd;
border-radius: 8px;
padding: 10px;
text-align: center;
}
.recommendation-item img {
width: 100%;
max-width: 150px;
height: auto;
margin-bottom: 10px;
}
.recommendation-item a {
color: #007bff;
text-decoration: none;
}
.recommendation-item a:hover {
text-decoration: underline;
}
@media (max-width: 600px) {
.card {
padding: 15px;
}
.card-header {
font-size: 1.2em;
}
button {
width: 100%;
}
}
</style>
</head>
<body>
<div id="quiz-container" class="card">
<div class="card-header">Weather Station Selector</div>
<div id="quiz-content" class="card-content"></div>
</div>
<script>
const questions = [
{
id: 1,
text: "What is your primary use for the weather station?",
options: [
{ value: "home", label: "Home use" },
{ value: "professional", label: "Professional/Research use" },
{ value: "agriculture", label: "Agricultural use" }
]
},
{
id: 2,
text: "Which measurements are most important to you?",
options: [
{ value: "basic", label: "Basic (temperature, humidity, pressure)" },
{ value: "advanced", label: "Advanced (includes wind, rain, UV)" },
{ value: "specialized", label: "Specialized (soil moisture, leaf wetness, etc.)" }
]
},
{
id: 3,
text: "Do you need to access your data remotely or share it online?",
options: [
{ value: "no", label: "No, local display is sufficient" },
{ value: "wifi", label: "Yes, I need WiFi connectivity" },
{ value: "pro", label: "Yes, I need professional-grade data sharing" }
]
}
];
const recommendations = {
"home-basic-no": [
{
name: "ACCUR8 YD8230A-4UK-BL",
link: "https://www.weathershop.co.uk/accur8-yd8230a-4uk-bl-weather-station-with-indoor-outdoor-temperature-humidity-barometric-pressure-and-moon-phase",
image: "/api/placeholder/200/200"
},
{
name: "Technoline WS 9130",
link: "https://www.weathershop.co.uk/technoline-ws-9130-weather-station",
image: "/api/placeholder/200/200"
},
{
name: "Bresser 7004350 ClimateTemp NDH-NEO",
link: "https://www.weathershop.co.uk/bresser-7004350-climatetemp-ndh-neo-weather-station",
image: "/api/placeholder/200/200"
},
{
name: "TFA HORIZON 35.1155",
link: "https://www.weathershop.co.uk/tfa-horizon-35-1155-weather-station",
image: "/api/placeholder/200/200"
},
{
name: "Technoline WS 9132",
link: "https://www.weathershop.co.uk/technoline-ws-9132-weather-station",
image: "/api/placeholder/200/200"
}
],
"home-basic-wifi": [
{
name: "ACCUR8 DWS5100",
link: "https://www.weathershop.co.uk/accur8-dws5100-wifi-weather-station",
image: "/api/placeholder/200/200"
},
{
name: "Bresser Clearview 7-in-1 WiFi Weather Station",
link: "https://www.weathershop.co.uk/bresser-clearview-7-in-1-wifi-weather-station",
image: "/api/placeholder/200/200"
},
{
name: "National Geographic 9080500 Colour 5-in-1 Complete Weather Station",
link: "https://www.weathershop.co.uk/national-geographic-9080500-colour-5-in-1-complete-weather-station",
image: "/api/placeholder/200/200"
}
],
"home-advanced-wifi": [
{
name: "ACCUR8 DWS7100",
link: "https://www.weathershop.co.uk/accur8-dws7100-7-in-1-complete-solar-powered-wifi-weather-station",
image: "/api/placeholder/200/200"
},
{
name: "Bresser 7003800 Wi-Fi 4CAST MD",
link: "https://www.weathershop.co.uk/bresser-7003800-wi-fi-4cast-md-weather-station",
image: "/api/placeholder/200/200"
},
{
name: "Technoline WS 1700",
link: "https://www.weathershop.co.uk/technoline-ws-1700-complete-weather-station",
image: "/api/placeholder/200/200"
}
],
"professional-advanced-wifi": [
{
name: "Davis Wireless Vantage Vue Weather Station with WeatherLink Console 6242UK",
link: "https://www.weathershop.co.uk/davis-wireless-vantage-vue-weather-station-with-weatherlink-console-6242uk",
image: "/api/placeholder/200/200"
},
{
name: "Davis Vantage Vue 6250UK",
link: "https://www.weathershop.co.uk/davis-vantage-vue-6250uk-weather-station",
image: "/api/placeholder/200/200"
},
{
name: "Davis Wireless Vantage Pro2 Weather Station with Standard Radiation Shield and WeatherLink Console 6252UK",
link: "https://www.weathershop.co.uk/davis-wireless-vantage-pro2-weather-station-with-standard-radiation-shield-and-weatherlink-console-6252uk",
image: "/api/placeholder/200/200"
}
],
"professional-specialized-pro": [
{
name: "Davis Vantage Pro2 Wireless Sensor Suite & WeatherLink Live Bundle 6112",
link: "https://www.weathershop.co.uk/davis-vantage-pro2-wireless-sensor-suite-weatherlink-live-bundle-6112",
image: "/api/placeholder/200/200"
},
{
name: "Davis Vantage Vue Sensors & WeatherLink Live Bundle 6110",
link: "https://www.weathershop.co.uk/davis-vantage-vue-sensors-weatherlink-live-bundle-6110",
image: "/api/placeholder/200/200"
},
{
name: "Davis Wireless Vantage Pro2 Plus with UV & Solar Radiation Sensors and WeatherLink Console 6262UK",
link: "https://www.weathershop.co.uk/davis-wireless-vantage-pro2-plus-with-uv-solar-radiation-sensors-and-weatherlink-console-6262uk",
image: "/api/placeholder/200/200"
}
],
"agriculture-specialized-pro": [
{
name: "Davis Vantage Pro2 Wireless Sensor Suite & WeatherLink Live Bundle 6112",
link: "https://www.weathershop.co.uk/davis-vantage-pro2-wireless-sensor-suite-weatherlink-live-bundle-6112",
image: "/api/placeholder/200/200"
},
{
name: "Bresser 7002510 5-in-1 Complete Weather Station with Programmable Weather Alerts",
link: "https://www.weathershop.co.uk/bresser-7002510-5-in-1-complete-weather-station",
image: "/api/placeholder/200/200"
},
{
name: "ACCUR8 Classic Analogue-Style Weather Station AWS200",
link: "https://www.weathershop.co.uk/accur8-classic-analogue-style-weather-station-aws200",
image: "/api/placeholder/200/200"
}
]
};
let currentQuestion = 0;
let answers = {};
function renderQuestion() {
const question = questions[currentQuestion];
let html = `
<p>${question.text}</p>
<div class="radio-group">
${question.options.map(option => `
<div class="radio-option">
<input type="radio" id="${option.value}" name="q${question.id}" value="${option.value}">
<label for="${option.value}">${option.label}</label>
</div>
`).join('')}
</div>
`;
document.getElementById('quiz-content').innerHTML = html;
const radioButtons = document.querySelectorAll('input[type="radio"]');
radioButtons.forEach(radio => {
radio.addEventListener('change', handleAnswer);
});
}
function handleAnswer(event) {
answers[questions[currentQuestion].id] = event.target.value;
if (currentQuestion < questions.length - 1) {
currentQuestion++;
renderQuestion();
} else {
showRecommendation();
}
}
function showRecommendation() {
const key = `${answers[1]}-${answers[2]}-${answers[3]}`;
const recommendation = recommendations[key] || [];
let html = `
<div class="card-header">Your Recommendations</div>
${recommendation.length > 0 ? `
<div class="recommendations">
${recommendation.map(item => `
<div class="recommendation-item">
<img src="${item.image}" alt="${item.name}">
<a href="${item.link}" target="_blank">${item.name}</a>
</div>
`).join('')}
</div>
` : `
<p>Based on your specific needs, we recommend contacting our support team for a personalized recommendation.</p>
`}
<button onclick="resetQuiz()">Start Over</button>
`;
document.getElementById('quiz-content').innerHTML = html;
}
function resetQuiz() {
currentQuestion = 0;
answers = {};
renderQuestion();
}
renderQuestion();
</script>
</body>
</html>