body {
font-family: Arial, sans-serif;
background-color: #f3f3f3;
color: #333;
margin: 0;
padding: 1rem;
}
.ethics-widget {
max-width: 700px;
margin: auto;
background: #fff;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
color: #3655b3;
font-size: 1.5rem;
margin-bottom: 1rem;
}
button {
background-color: #3655b3;
color: white;
padding: 0.75rem;
font-size: 1rem;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 1rem;
transition: background 0.3s;
width: 100%;
}
button:hover {
background-color: #2c4695;
}
.decision-step {
margin: 1rem 0;
padding: 1rem;
background: #eaeaea;
border-radius: 5px;
}
.decision-step p {
margin: 0 0 0.5rem;
}
.resources, .case-studies {
margin-top: 2rem;
}
.download {
margin-top: 1rem;
display: block;
text-align: center;
color: #3655b3;
text-decoration: underline;
}
@media (max-width: 600px) {
button {
font-size: 1rem;
}
}

 

const steps = [
{
question: “Is human oversight possible in this AI decision?”,
yes: 1,
no: 2
},
{
question: “Is the AI outcome explainable to affected users?”,
yes: 3,
no: 4
},
{
question: “Can harm from lack of oversight be prevented?”,
yes: 3,
no: 5
},
{
question: “Proceed with implementation, but document decisions and monitor closely.”,
yes: null,
no: null
},
{
question: “Redesign system to improve explainability before proceeding.”,
yes: null,
no: null
},
{
question: “Halt deployment until oversight mechanisms are in place.”,
yes: null,
no: null
}
];

let position = 0;
const tree = document.getElementById(“tree”);

function renderStep() {
tree.innerHTML = “”;
const step = steps[position];
const div = document.createElement(“div”);
div.className = “decision-step”;
const p = document.createElement(“p”);
p.textContent = step.question;
div.appendChild(p);

if (step.yes === null && step.no === null) {
const reset = document.createElement(“button”);
reset.textContent = “Start Over”;
reset.onclick = () => {
position = 0;
renderStep();
};
div.appendChild(reset);
} else {
const yesBtn = document.createElement(“button”);
yesBtn.textContent = “Yes”;
yesBtn.onclick = () => {
position = step.yes;
saveProgress();
renderStep();
};
const noBtn = document.createElement(“button”);
noBtn.textContent = “No”;
noBtn.onclick = () => {
position = step.no;
saveProgress();
renderStep();
};
div.appendChild(yesBtn);
div.appendChild(noBtn);
}
tree.appendChild(div);
}

function saveProgress() {
localStorage.setItem(“aiEthicsProgress”, position);
}

function loadProgress() {
const saved = localStorage.getItem(“aiEthicsProgress”);
if (saved !== null) {
position = parseInt(saved);
}
}

loadProgress();
renderStep();