How much speed do you need?
Take our quick speed quiz to find your ideal internet speed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Speed Calculator</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
body {
font-family: 'Poppins', sans-serif;
padding: 0;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
margin: 0;
}
.container {
background-color: #f4eae3;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 600px;
width: 100%;
margin-top: 20px; /* Ensure it's not cut off */
}
h1 {
text-align: left;
margin-bottom: 20px;
color: #0f1822;
font-family: 'Helvetica', sans-serif;
font-size: x-large;
}
.form-group {
display: none;
margin-bottom: 15px;
}
.form-group.active {
display: block;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #333;
}
.form-group input[type="radio"] {
margin-right: 10px;
}
.info-text {
font-size: 0.9em;
color: #666;
margin-top: 5px;
}
.buttons {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.buttons button {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 4px;
cursor: pointer;
background-color: #0f1822;
color: #fff;
transition: background-color 0.3s ease;
}
.buttons button:hover {
background-color: #41454a;
}
.buttons button[disabled] {
background-color: #ccc;
cursor: not-allowed;
}
#next-button {
background-color: #119391;
color: #f4eae3;
}
#calculate-button {
display: none;
margin-left: auto;
}
#result {
margin-top: 20px;
font-size: 1.2em;
font-weight: bold;
color: #333;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>Speed Calculator</h1>
<form id="bandwidth-form">
<div class="form-group active" id="question-1">
<label>How many people use the internet in your home?</label>
<label><input type="radio" name="household" value="10"> 1-2</label>
<label><input type="radio" name="household" value="20"> 3-4</label>
<label><input type="radio" name="household" value="30"> 5 or more</label>
</div>
<div class="form-group" id="question-2">
<label>How many devices in your home connect to the internet?</label>
<label><input type="radio" name="devices" value="10"> 1-3</label>
<label><input type="radio" name="devices" value="20"> 4-7</label>
<label><input type="radio" name="devices" value="30"> 8 or more</label>
<div class="info-text">Devices such as mobile phones, smart TVs, appliances and security systems need bandwidth</div>
</div>
<div class="form-group" id="question-3">
<label>How often do you video call?</label>
<label><input type="radio" name="video-calls" value="0"> Never</label>
<label><input type="radio" name="video-calls" value="10"> Occasionally</label>
<label><input type="radio" name="video-calls" value="20"> Frequently</label>
</div>
<div class="form-group" id="question-4">
<label>Do you or anyone else work from home?</label>
<label><input type="radio" name="work-home" value="0"> No</label>
<label><input type="radio" name="work-home" value="20"> Yes</label>
</div>
<div class="form-group" id="question-5">
<label>How many hours do you stream content per week?</label>
<label><input type="radio" name="streaming-hours" value="10"> 0-5 hours</label>
<label><input type="radio" name="streaming-hours" value="20"> 6-15 hours</label>
<label><input type="radio" name="streaming-hours" value="30"> 16 or more hours</label>
<div class="info-text">Netflix, YouTube, TikTok are all content streaming services</div>
</div>
<div class="form-group" id="question-6">
<label>How many devices are streaming content at the same time?</label>
<label><input type="radio" name="streaming-devices" value="10"> 1 device</label>
<label><input type="radio" name="streaming-devices" value="20"> 2-3 devices</label>
<label><input type="radio" name="streaming-devices" value="30"> 4 or more devices</label>
</div>
<div class="form-group" id="question-7">
<label>Any gamers using the internet? If yes, how many hours are spent gaming?</label>
<label><input type="radio" name="gaming" value="0"> None</label>
<label><input type="radio" name="gaming" value="10"> 1-5 hours</label>
<label><input type="radio" name="gaming" value="20"> 6-15 hours</label>
<label><input type="radio" name="gaming" value="30"> 16 or more hours</label>
</div>
<div class="form-group" id="question-8">
<label>How important is a reliable, seamless internet connection to you?</label>
<label><input type="radio" name="reliability" value="10"> Not very important</label>
<label><input type="radio" name="reliability" value="20"> Somewhat important</label>
<label><input type="radio" name="reliability" value="30"> Very important</label>
</div>
<div class="buttons">
<button type="button" onclick="previousQuestion()" id="previous-button" disabled>Previous</button>
<button type="button" onclick="nextQuestion()" id="next-button">Next</button>
<button type="button" onclick="calculateBandwidth()" id="calculate-button">Calculate Speed</button>
</div>
</form>
<div id="result"></div>
</div>
<script>
let currentQuestion = 1;
const totalQuestions = 8;
function showQuestion(questionNumber) {
for (let i = 1; i <= totalQuestions; i++) {
if (i === questionNumber) {
document.getElementById('question-' + i).classList.add('active');
} else {
document.getElementById('question-' + i).classList.remove('active');
}
}
document.getElementById('previous-button').disabled = questionNumber === 1;
document.getElementById('next-button').style.display = questionNumber === totalQuestions ? 'none' : 'inline';
document.getElementById('calculate-button').style.display = questionNumber === totalQuestions ? 'inline' : 'none';
if (questionNumber !== totalQuestions) {
document.getElementById('result').textContent = '';
}
}
function nextQuestion() {
const currentQuestionGroup = document.querySelector(`#question-${currentQuestion}`);
const selectedOption = currentQuestionGroup.querySelector('input[type="radio"]:checked');
if (!selectedOption) {
alert("Please select an option before proceeding.");
return;
}
if (currentQuestion < totalQuestions) {
currentQuestion++;
showQuestion(currentQuestion);
}
}
function previousQuestion() {
if (currentQuestion > 1) {
currentQuestion--;
showQuestion(currentQuestion);
}
}
function calculateBandwidth() {
const household = parseInt(document.querySelector('input[name="household"]:checked').value);
const devices = parseInt(document.querySelector('input[name="devices"]:checked').value);
const videoCalls = parseInt(document.querySelector('input[name="video-calls"]:checked').value);
const workHome = parseInt(document.querySelector('input[name="work-home"]:checked').value);
const streamingHours = parseInt(document.querySelector('input[name="streaming-hours"]:checked').value);
const streamingDevices = parseInt(document.querySelector('input[name="streaming-devices"]:checked').value);
const gaming = parseInt(document.querySelector('input[name="gaming"]:checked').value);
const reliability = parseInt(document.querySelector('input[name="reliability"]:checked').value);
const total = household + devices + videoCalls + workHome + streamingHours + streamingDevices + gaming + reliability;
let lowerRange, upperRange;
if (total <= 70) {
lowerRange = "20Mbps";
upperRange = "75Mbps";
} else if (total <= 140) {
lowerRange = "75Mbps";
upperRange = "250Mbps";
} else if (total <= 200) {
lowerRange = "250Mbps";
upperRange = "500Mbps";
} else {
lowerRange = "500Mbps";
upperRange = "1Gbps";
}
document.getElementById('result').textContent = `We estimate your speed requirements to be between ${lowerRange} and ${upperRange}.`;
}
showQuestion(currentQuestion);
</script>
</body>
</html>