2nd try
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Find Your Best Likeness to God</title>
<style>
/* Basic styling for the page */
Body {
Font-family: Arial, sans-serif;
Margin: 0;
Padding: 20px;
}
H1 {
Text-align: center;
}
#questions {
Margin-top: 20px;
}
#result {
Text-align: center;
Margin-top: 20px;
}
</style>
</head>
<body>
<h1>Find Your Best Likeness to God</h1>
<div id=”questions”>
<h3>Answer the following questions:</h3>
<p>1. Are you more inclined towards justice or mercy?</p>
<input type=”radio” name=”question1” value=”justice”> Justice
<input type=”radio” name=”question1” value=”mercy”> Mercy
<p>2. Do you prefer order and structure or flexibility and adaptability?</p>
<input type=”radio” name=”question2” value=”order”> Order
<input type=”radio” name=”question2” value=”flexibility”> Flexibility
<p>3. Are you more assertive and authoritative or gentle and compassionate?</p>
<input type=”radio” name=”question3” value=”assertive”> Assertive
<input type=”radio” name=”question3” value=”gentle”> Gentle
<p>4. Do you value wisdom and knowledge or action and practicality?</p>
<input type=”radio” name=”question4” value=”wisdom”> Wisdom
<input type=”radio” name=”question4” value=”action”> Action
</div>
<button onclick=”findBestLikeness()”>Find Best Likeness</button>
<div id=”result”></div>
<script>
Function findBestLikeness() {
Const answers = {
Question1: document.querySelector(‘input[name=”question1”]:checked’),
Question2: document.querySelector(‘input[name=”question2”]:checked’),
Question3: document.querySelector(‘input[name=”question3”]:checked’),
Question4: document.querySelector(‘input[name=”question4”]:checked’)
};