<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Challenge Your Beliefs</title>
<style>
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
line-height: 1.6;
margin: 0;
background-color: #f4f4f4; /* Light grey background */
color: #333333; /* Dark grey text */
padding-bottom: 20px;
}
.app-container {
max-width: 800px;
margin: 0 auto;
padding: 0 15px;
}
header {
text-align: center;
padding: 30px 0 20px 0;
border-bottom: 1px solid #dddddd; /* Light grey border */
margin-bottom: 30px;
}
header h1 {
margin: 0 0 10px 0;
color: #000000; /* Black heading */
font-size: 2em;
}
header p {
margin: 0;
font-size: 1.1em;
color: #555555; /* Medium grey subtext */
}
main {
display: flex;
flex-direction: column;
gap: 25px;
}
.panel {
background-color: #ffffff; /* White panel background */
padding: 25px;
border: 1px solid #dddddd; /* Light grey border */
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Subtle shadow */
}
.panel h2 {
margin-top: 0;
color: #000000; /* Black panel titles */
border-bottom: 1px solid #eeeeee; /* Very light grey separator */
padding-bottom: 10px;
margin-bottom: 20px;
font-size: 1.5em;
}
#userBeliefInput {
width: 100%;
min-height: 70px;
padding: 12px;
border: 1px solid #cccccc; /* Medium grey border for input */
border-radius: 5px;
box-sizing: border-box;
font-size: 1em;
resize: vertical;
}
button {
background-color: #333333; /* Dark grey button */
color: #ffffff; /* White text on button */
border: none;
padding: 12px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
transition: background-color 0.2s ease-in-out;
display: inline-block;
}
button:hover {
background-color: #555555; /* Slightly lighter grey on hover */
}
#challengeButton {
margin-bottom: 15px;
}
.challenge-fact-container {
margin-top: 15px;
padding: 15px;
background-color: #eeeeee; /* Light grey for challenge box */
border-left: 5px solid #777777; /* Medium grey accent border */
border-radius: 0 5px 5px 0;
min-height: 50px;
}
.challenge-fact-container p {
margin: 0.5em 0;
color: #333333;
}
.challenge-fact-container p:first-child { margin-top: 0; }
.challenge-fact-container p:last-child { margin-bottom: 0; }
.challenge-fact-container .user-belief-echo {
font-style: italic;
color: #555555;
margin-bottom: 10px !important;
}
.challenge-fact-container .challenge-statement strong {
color: #000000; /* Black for "Challenge:" text */
}
.result-columns {
display: flex;
justify-content: space-between;
gap: 20px;
margin-bottom: 20px;
}
.result-column {
flex: 1;
padding: 20px;
border: 1px solid #dddddd;
border-radius: 6px;
text-align: center;
background-color: #f9f9f9; /* Very light grey for result columns */
}
.result-column h3 {
margin-top: 0;
margin-bottom: 10px;
font-size: 1.2em;
color: #333333;
}
.count {
font-size: 2.2em;
font-weight: bold;
color: #000000; /* Black for count numbers */
margin: 10px 0 15px 0;
display: block;
}
.result-column button {
width: 100%;
box-sizing: border-box;
}
#resetCountsButton {
background-color: #777777; /* Medium grey for reset button */
margin-top: 10px;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 200px;
}
#resetCountsButton:hover {
background-color: #999999; /* Lighter grey for reset hover */
}
footer {
text-align: center;
margin-top: 40px;
padding: 20px 0;
font-size: 0.9em;
color: #777777; /* Medium grey for footer text */
border-top: 1px solid #eeeeee;
}
/* Responsive adjustments */
@media (max-width: 768px) {
header h1 {
font-size: 1.8em;
}
header p {
font-size: 1em;
}
.panel {
padding: 20px;
}
}
@media (max-width: 600px) {
.result-columns {
flex-direction: column;
}
.result-column {
margin-bottom: 15px;
}
.result-columns .result-column:last-child {
margin-bottom: 0;
}
button {
padding: 10px 15px;
font-size: 0.95em;
}
#userBeliefInput {
min-height: 60px;
}
}
</style>
</head>
<body>
<div class="app-container">
<header>
<h1>Challenge Your Beliefs</h1>
<p>An interactive tool to explore new perspectives and question assumptions.</p>
</header>
<main>
<section id="belief-panel" class="panel">
<h2>1. State Your Belief</h2>
<textarea id="userBeliefInput" placeholder="e.g., 'Success is purely about hard work.' or 'Technology always improves lives.'"></textarea>
</section>
<section id="challenge-panel" class="panel">
<h2>2. Get a Challenge</h2>
<button id="challengeButton">Challenge my belief</button>
<div id="challengeDisplay" class="challenge-fact-container">
<p>Enter a belief above and click 'Challenge my belief' to see a thought-provoking prompt here.</p>
</div>
</section>
<section id="result-panel" class="panel">
<h2>3. Reflect & Record Your Stance</h2>
<div class="result-columns">
<div class="result-column">
<h3>I still believe</h3>
<p class="count" id="stillBelieveCountDisplay">0</p>
<button id="increaseStillBelieveButton">Tap to increase count</button>
</div>
<div class="result-column">
<h3>I have a new perspective</h3>
<p class="count" id="newPerspectiveCountDisplay">0</p>
<button id="increaseNewPerspectiveButton">Tap to increase count</button>
</div>
</div>
<button id="resetCountsButton">Reset Counts</button>
</section>
</main>
<footer>
<p>© 2024 Belief Challenger. Designed to encourage critical thinking.</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// DOM Elements
const userBeliefInputElement = document.getElementById('userBeliefInput');
const challengeButtonElement = document.getElementById('challengeButton');
const challengeDisplayElement = document.getElementById('challengeDisplay');
const stillBelieveCountDisplayElement = document.getElementById('stillBelieveCountDisplay');
const newPerspectiveCountDisplayElement = document.getElementById('newPerspectiveCountDisplay');
const increaseStillBelieveButtonElement = document.getElementById('increaseStillBelieveButton');
const increaseNewPerspectiveButtonElement = document.getElementById('increaseNewPerspectiveButton');
const resetCountsButtonElement = document.getElementById('resetCountsButton');
// Challenge Facts Database
const challengeFacts = [
"Consider this: Many 'truths' are shaped by the era and culture we live in. What might someone from a different time or place think about your belief?",
"Food for thought: Our brains often seek patterns and create narratives, even when they're not entirely accurate. Could there be an alternative explanation or interpretation for what you believe?",
"Did you know? Confirmation bias leads us to favor information that confirms our existing beliefs. Try actively seeking out evidence that *challenges* or even *disproves* your belief.",
"Perspective shift: Imagine you strongly believed the opposite of your statement. What arguments or evidence would you use to support that opposing view?",
"Remember: What seems like 'common sense' can sometimes be a widely shared misconception. History is full of examples where collective belief turned out to be incorrect.",
"Critical lens: Is your belief based on verifiable facts and evidence, or is it more an interpretation, opinion, deeply ingrained tradition, or something you heard without questioning?",
"Source check: Where did this belief originate? Is the source unbiased, credible, and up-to-date? Could there be motives behind promoting this belief?",
"What if: If compelling, new, and contradictory evidence emerged tomorrow, how open would you genuinely be to reconsidering or even abandoning your current belief?",
"The Dunning-Kruger effect suggests that people with low ability at a task overestimate their ability. Could this apply to the certainty of some beliefs?",
"Many beliefs are held because they offer comfort, social cohesion, or a sense of identity, not necessarily because they are factually accurate. Is it possible this applies here?"
];
// State Variables for Counts
let stillBelieveCount = 0;
let newPerspectiveCount = 0;
// Event Listener for Challenge Button
challengeButtonElement.addEventListener('click', () => {
const userBelief = userBeliefInputElement.value.trim();
const randomIndex = Math.floor(Math.random() * challengeFacts.length);
const randomFact = challengeFacts[randomIndex];
let challengeHtml = "";
if (userBelief) {
// Basic sanitization for displaying user input
const sanitizedBelief = userBelief.replace(/</g, "<").replace(/>/g, ">");
challengeHtml += `<p class="user-belief-echo"><strong>You stated:</strong> "${sanitizedBelief}"</p>`;
} else {
challengeHtml += `<p class="user-belief-echo"><em>You haven't stated a specific belief, but here's a general thought challenge:</em></p>`;
}
challengeHtml += `<p class="challenge-statement"><strong>Challenge:</strong> ${randomFact}</p>`;
challengeDisplayElement.innerHTML = challengeHtml;
});
// Function to update count displays
function updateCountDisplays() {
stillBelieveCountDisplayElement.textContent = stillBelieveCount;
newPerspectiveCountDisplayElement.textContent = newPerspectiveCount;
}
// Event Listeners for Result Panel Buttons
increaseStillBelieveButtonElement.addEventListener('click', () => {
stillBelieveCount++;
updateCountDisplays();
});
increaseNewPerspectiveButtonElement.addEventListener('click', () => {
newPerspectiveCount++;
updateCountDisplays();
});
resetCountsButtonElement.addEventListener('click', () => {
stillBelieveCount = 0;
newPerspectiveCount = 0;
updateCountDisplays();
// Optionally, clear the challenge display and input as well
// userBeliefInputElement.value = "";
// challengeDisplayElement.innerHTML = "<p>Enter a belief above and click 'Challenge my belief' to see a thought-provoking prompt here.</p>";
});
// Initialize count displays
updateCountDisplays();
});
</script>
</body>
</html>
