Investor Risk Profile Calculator
About this app
A web-based calculator to assess an investor's risk profile through a guided questionnaire.
Investor Risk Profile Calculator 📈 Investor Risk Profile Calculator Your Risk Profile: 🎯
Related apps
Put this on your site
Source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Investor Risk Profile Calculator</title>
<meta name="description" content="A web-based calculator to assess an investor's risk profile through a guided questionnaire.">
<meta name="keywords" content="risk assessment, investor profile, financial calculator, behavioral finance, portfolio allocation">
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Fredoka One', cursive;
background: linear-gradient(135deg, #FFD3A5, #FD6585);
color: #333;
text-align: center;
margin: 0;
padding: 20px;
}
.container {
max-width: 700px;
margin: auto;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.question {
margin-bottom: 20px;
}
.options input {
margin-right: 5px;
}
.progress-bar {
background: #eee;
border-radius: 13px;
padding: 3px;
margin-bottom: 20px;
}
.progress-bar-fill {
background: #fd6585;
height: 20px;
border-radius: 10px;
transition: width 0.4s ease-in-out;
}
.result {
display: none;
margin-top: 20px;
}
button {
cursor: pointer;
background: #fd6585;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
transition: background-color 0.3s ease;
}
button:hover {
background: #ff7b9c;
}
@media (max-width: 768px) {
body {
padding: 10px;
}
.container {
padding: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>📈 Investor Risk Profile Calculator</h1>
<div class="progress-bar">
<div class="progress-bar-fill" style="width: 0%;"></div>
</div>
<form id="questionnaire">
<!-- Questions will be populated here by JavaScript -->
</form>
<div class="result">
<h2>Your Risk Profile: <span id="profileCategory"></span> 🎯</h2>
<p id="profileDescription"></p>
</div>
</div>
<script>
const questions = [
{ text: "What is your investment goal?", options: ["Wealth Preservation", "Balanced", "Wealth Accumulation"], values: [2, 6, 10] },
{ text: "How experienced are you with investments?", options: ["Beginner", "Intermediate", "Expert"], values: [3, 7, 11] },
// ... More questions will be added here ...
];
const profileCategories = [
{ min: 20, max: 30, name: "Conservative", description: "A conservative portfolio focuses on minimizing risk." },
{ min: 31, max: 40, name: "Balanced", description: "A balanced portfolio offers a mix of growth and stability." },
{ min: 41, max: 50, name: "Growth", description: "A growth portfolio aims for higher returns with moderate risk." },
{ min: 51, max: 60, name: "Aggressive", description: "An aggressive portfolio seeks high returns with high risk." }
];
function createQuestionElement(question, index) {
const questionDiv = document.createElement('div');
questionDiv.classList.add('question');
questionDiv.innerHTML = `
<h3>${index + 1}. ${question.text}</h3>
<div class="options">
${question.options.map((option, i) => `
<label>
<input type="radio" name="question${index}" value="${question.values[i]}" required />
${option}
</label>
`).join('')}
</div>
`;
return questionDiv;
}
function updateProgressBar(progress) {
const progressBarFill = document.querySelector('.progress-bar-fill');
progressBarFill.style.width = `${progress}%`;
}
function calculateRiskProfile() {
const formData = new FormData(document.getElementById('questionnaire'));
let totalRisk = 0;
for (const value of formData.values()) {
totalRisk += parseInt(value);
}
const profileCategory = profileCategories.find(category => totalRisk >= category.min && totalRisk <= category.max);
document.getElementById('profileCategory').textContent = profileCategory.name;
document.getElementById('profileDescription').textContent = profileCategory.description;
document.querySelector('.result').style.display = 'block';
}
function initQuestionnaire() {
const form = document.getElementById('questionnaire');
questions.forEach((question, index) => {
form.appendChild(createQuestionElement(question, index));
});
const submitButton = document.createElement('button');
submitButton.textContent = 'Calculate Risk Profile';
submitButton.addEventListener('click', (e) => {
e.preventDefault();
if (form.checkValidity()) {
calculateRiskProfile();
} else {
form.reportValidity();
}
});
form.appendChild(submitButton);
}
initQuestionnaire();
document.getElementById('questionnaire').addEventListener('change', (e) => {
const totalQuestions = document.querySelectorAll('.question').length;
const answeredQuestions = new FormData(document.getElementById('questionnaire')).values().length;
const progress = (answeredQuestions / totalQuestions) * 100;
updateProgressBar(progress);
});
</script>
</body>
</html>
NEW APPS
These are apps made by the community!