Dorian Gray \u2014 The Beautiful Corrupt | Righteous Museum<\/title>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n background: #1a1a2e;\n font-family: 'Georgia', 'Times New Roman', Times, serif;\n color: #2c2b28;\n line-height: 1.5;\n padding: 20px;\n }\n\n .museum-container {\n max-width: 1400px;\n margin: 0 auto;\n background: #fef7e0;\n border-radius: 28px;\n box-shadow: 0 20px 35px rgba(0,0,0,0.3), 0 0 0 1px #c9a87b inset;\n overflow: hidden;\n }\n\n .hero {\n background: linear-gradient(135deg, #2c2c3a 0%, #1a1a2a 100%);\n padding: 1.8rem 2.5rem;\n border-bottom: 6px solid #d4af37;\n color: #f5e7cf;\n display: flex;\n align-items: center;\n gap: 20px;\n flex-wrap: wrap;\n }\n .hero-text {\n flex: 2;\n }\n .hero h1 {\n font-size: 2rem;\n letter-spacing: 1px;\n font-weight: 600;\n }\n .hero h1 i {\n color: #d4af37;\n margin-right: 10px;\n }\n .hero h1 .app-badge {\n font-size: 0.8rem;\n background: #d4af3733;\n padding: 0.2rem 0.8rem;\n border-radius: 40px;\n margin-left: 12px;\n vertical-align: middle;\n }\n .hero p {\n font-size: 1rem;\n font-style: italic;\n margin-top: 0.5rem;\n opacity: 0.85;\n }\n .hero-portrait {\n flex: 0 0 100px;\n text-align: center;\n background: #d4af3730;\n padding: 8px;\n border-radius: 50%;\n border: 2px solid #d4af37;\n }\n .hero-portrait i {\n font-size: 3.5rem;\n color: #ecd9b4;\n }\n .hero-portrait p {\n font-size: 0.65rem;\n margin-top: 5px;\n }\n\n .flex-main {\n display: flex;\n flex-wrap: wrap;\n }\n .article-panel {\n flex: 1.6;\n min-width: 280px;\n padding: 2rem 2rem 2rem 2.2rem;\n background: #fffaf2;\n border-right: 1px solid #ecd9b4;\n }\n .game-sat-panel {\n flex: 1.2;\n min-width: 350px;\n background: #f9efdf;\n padding: 2rem 1.8rem;\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n }\n\n .article-panel h2 {\n font-size: 1.8rem;\n border-left: 7px solid #d4af37;\n padding-left: 1rem;\n margin: 0.75rem 0 1rem 0;\n color: #2d482b;\n }\n .article-panel h2 i {\n color: #d4af37;\n margin-right: 10px;\n }\n .article-panel h3 {\n font-size: 1.3rem;\n margin: 1.4rem 0 0.5rem 0;\n color: #8b5a2b;\n font-weight: 600;\n }\n .article-panel p {\n margin-bottom: 0.9rem;\n text-align: justify;\n }\n .article-panel blockquote {\n margin: 1rem 0;\n padding: 0.8rem 1.5rem;\n background: #f3eddd;\n border-left: 5px solid #d4af37;\n border-radius: 8px;\n font-style: italic;\n color: #4a3a2a;\n }\n .article-panel blockquote i {\n color: #d4af37;\n margin-right: 8px;\n }\n .events-grid {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin: 15px 0;\n }\n .event-badge {\n background: #e9e0cf;\n padding: 6px 14px;\n border-radius: 40px;\n font-size: 0.8rem;\n border: 1px solid #cfb37a;\n }\n .event-badge i {\n margin-right: 6px;\n font-size: 0.7rem;\n }\n .inset-quote {\n background: #e9e0cf;\n padding: 0.8rem 1.3rem;\n border-left: 4px solid #d4af37;\n margin: 1.2rem 0;\n border-radius: 12px;\n font-weight: 500;\n }\n .timeline-item {\n margin: 12px 0;\n padding-left: 20px;\n border-left: 3px solid #d4af37;\n }\n .timeline-year {\n font-weight: bold;\n color: #8b5a2b;\n }\n .reference-list {\n font-size: 0.8rem;\n margin-top: 1.5rem;\n border-top: 1px dashed #cfbc93;\n padding-top: 1rem;\n color: #5e4b2b;\n }\n .figure-placeholder {\n background: #2d2d3a;\n border-radius: 16px;\n padding: 1.2rem;\n margin: 1.2rem 0;\n color: #e5dccb;\n }\n .figure-placeholder i {\n font-size: 2.5rem;\n color: #d4af37;\n }\n .figure-placeholder .fig-caption {\n font-size: 0.8rem;\n font-style: italic;\n margin-top: 6px;\n opacity: 0.8;\n }\n\n \/* Mode Selection & Quiz Styles *\/\n .mode-selector {\n background: white;\n border-radius: 28px;\n padding: 1.2rem;\n text-align: center;\n box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n }\n .mode-buttons {\n display: flex;\n gap: 12px;\n justify-content: center;\n margin-top: 12px;\n flex-wrap: wrap;\n }\n .mode-btn {\n flex: 1;\n min-width: 90px;\n padding: 12px;\n border: none;\n border-radius: 60px;\n font-weight: bold;\n font-size: 1rem;\n cursor: pointer;\n transition: 0.2s;\n font-family: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n }\n .mode-btn.sat {\n background: #1e3a2f;\n color: white;\n }\n .mode-btn.psat {\n background: #2c5f6e;\n color: white;\n }\n .mode-btn.act {\n background: #8b5a2b;\n color: white;\n }\n .mode-btn:hover {\n transform: translateY(-2px);\n filter: brightness(1.05);\n }\n .mode-btn.active {\n box-shadow: 0 0 0 3px #ffd966;\n }\n .quiz-header {\n background: linear-gradient(145deg, #2c4b3e, #1e3a2f);\n color: white;\n padding: 1rem;\n border-radius: 28px;\n text-align: center;\n }\n .score-area {\n font-size: 1.6rem;\n font-weight: bold;\n background: #00000055;\n display: inline-block;\n padding: 0.2rem 1.2rem;\n border-radius: 40px;\n margin-top: 8px;\n }\n .question-card {\n background: white;\n border-radius: 28px;\n padding: 1.5rem;\n box-shadow: 0 8px 18px rgba(0,0,0,0.1);\n }\n .question-text {\n font-size: 1.1rem;\n font-weight: 700;\n margin-bottom: 1.2rem;\n background: #fdf4e0;\n padding: 12px;\n border-radius: 20px;\n border-left: 5px solid #d4af37;\n }\n .options-list {\n display: flex;\n flex-direction: column;\n gap: 10px;\n margin-bottom: 1.5rem;\n }\n .opt-btn {\n background: #efe2cf;\n border: 2px solid #cfb37a;\n padding: 10px 14px;\n border-radius: 60px;\n font-family: 'Segoe UI', 'Georgia', serif;\n font-size: 0.9rem;\n text-align: left;\n cursor: pointer;\n transition: 0.2s;\n }\n .opt-btn i {\n margin-right: 10px;\n }\n .opt-btn:hover:not(:disabled) {\n background: #e2cfb0;\n }\n .opt-btn.correct-highlight {\n background: #a5d6a5;\n border-color: #2e7d32;\n }\n .opt-btn.wrong-highlight {\n background: #ef9a9a;\n border-color: #c62828;\n }\n .opt-btn:disabled {\n cursor: default;\n opacity: 0.8;\n }\n .feedback {\n margin-top: 15px;\n padding: 12px;\n border-radius: 20px;\n background: #f3efdf;\n font-size: 0.9rem;\n border-left: 5px solid #d4af37;\n }\n .next-btn, .restart-btn {\n background: #846c3e;\n border: none;\n color: white;\n font-weight: bold;\n padding: 10px;\n border-radius: 40px;\n font-size: 1rem;\n cursor: pointer;\n margin-top: 10px;\n width: 100%;\n }\n .next-btn:hover, .restart-btn:hover {\n background: #5f4a2a;\n }\n .game-status {\n font-size: 0.75rem;\n text-align: center;\n background: #e2d5bd;\n padding: 6px;\n border-radius: 50px;\n margin-top: 8px;\n }\n footer {\n text-align: center;\n padding: 1rem;\n background: #dfd2b6;\n font-size: 0.7rem;\n color: #4a3a22;\n }\n .disclaimer {\n font-size: 0.65rem;\n text-align: center;\n margin-top: 8px;\n color: #6b5a3e;\n }\n @media (max-width: 780px) {\n .hero h1 { font-size: 1.3rem; }\n .hero-portrait { flex-basis: 70px; }\n .hero-portrait i { font-size: 2.2rem; }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"museum-container\">\n <div class=\"hero\">\n <div class=\"hero-text\">\n <h1><i class=\"fas fa-theater-masks\"><\/i> Dorian Gray \u2014 The Beautiful Corrupt <span class=\"app-badge\"><i class=\"fas fa-mobile-alt\"><\/i> Literary Quiz<\/span><\/h1>\n <p><i class=\"fas fa-book-open\"><\/i> A beautiful man traded his soul for eternal youth, proving inner corruption destroys all.<\/p>\n <\/div>\n <div class=\"hero-portrait\">\n <i class=\"fas fa-paint-brush\"><\/i>\n <p><i class=\"fas fa-skull\"><\/i> The Portrait<\/p>\n <\/div>\n <\/div>\n\n <div class=\"flex-main\">\n <div class=\"article-panel\">\n <h2><i class=\"fas fa-palette\"><\/i> The Tragic Tale of Beauty & Corruption<\/h2>\n <p>Dorian Gray is the protagonist of Oscar Wilde’s only novel, first published in 1890. A young man of extraordinary beauty, he is introduced to the hedonistic worldview of Lord Henry Wotton, who argues that beauty and sensual fulfillment are the only things worth pursuing in life. Distressed by the realization that his beauty will fade with age, Dorian makes a fateful wish: he would give his soul if his portrait would age and decay while he remained forever young and handsome.<\/p>\n\n <div class=\"events-grid\">\n <span class=\"event-badge\"><i class=\"fas fa-mask\"><\/i> Beauty & Morality<\/span>\n <span class=\"event-badge\"><i class=\"fas fa-skull\"><\/i> The Portrait<\/span>\n <span class=\"event-badge\"><i class=\"fas fa-gavel\"><\/i> Conscience<\/span>\n <span class=\"event-badge\"><i class=\"fas fa-heart-broken\"><\/i> Corruption<\/span>\n <span class=\"event-badge\"><i class=\"fas fa-book\"><\/i> Gothic Fiction<\/span>\n <\/div>\n\n <h3><i class=\"fas fa-question-circle\"><\/i> The Righteous Dilemma<\/h3>\n <p>Dorian Gray’s story forces us to confront a fundamental question: <strong>When the pursuit of beauty and pleasure becomes life’s highest goal, what happens to the soul?<\/strong><\/p>\n <p>Dorian embraces a philosophy of indulgence without restraint. He ruins reputations, destroys lives, and commits murder\u2014yet his face remains untouched, his youth preserved. The portrait bears the weight of his sins, allowing Dorian to live as if there were no consequences. But the portrait is not just a painting\u2014it is his conscience made visible. The novel ultimately argues that <strong>a life without moral restraint is not freedom\u2014it is slavery to one’s own desires<\/strong>.<\/p>\n\n <blockquote><i class=\"fas fa-quote-left\"><\/i> “I knew nothing but shadows, and I thought them real. You came\u2014oh, my beautiful love!\u2014and you freed my soul from prison.”<\/blockquote>\n\n <div class=\"figure-placeholder\">\n <i class=\"fas fa-paint-brush\"><\/i> <strong>Figure 1 \u2014 Dorian: The Beautiful Mask<\/strong>\n <p><em>A strikingly beautiful young man stares at his portrait\u2014the contrast between his flawless face and the portrait’s grotesque decay captures the confrontation between appearance and reality.<\/em><\/p>\n <p class=\"fig-caption\"><i class=\"fas fa-image\"><\/i> AI Prompt: Victorian Gothic, dramatic chiaroscuro, oil painting texture.<\/p>\n <\/div>\n\n <h3><i class=\"fas fa-gem\"><\/i> Key Lessons on Righteousness<\/h3>\n <ul style=\"padding-left: 1.5rem; margin-bottom: 1rem;\">\n <li><strong>The soul cannot be hidden<\/strong> \u2014 No matter how perfect the exterior, the soul bears the marks of every choice.<\/li>\n <li><strong>Beauty without goodness is hollow<\/strong> \u2014 True beauty requires integrity of character.<\/li>\n <li><strong>Conscience cannot be silenced<\/strong> \u2014 The voice of conscience will always find a way to speak.<\/li>\n <li><strong>Vanity is a form of idolatry<\/strong> \u2014 When we worship ourselves, we destroy what is most valuable in us.<\/li>\n <li><strong>Consequences cannot be avoided<\/strong> \u2014 Justice always comes.<\/li>\n <\/ul>\n\n <div class=\"reference-list\">\n <i class=\"fas fa-book-open\"><\/i> <strong>References:<\/strong> Wilde, O. (1890). <em>The Picture of Dorian Gray<\/em>. Lippincott’s Monthly Magazine. Public domain.\n <\/div>\n <\/div>\n\n <div class=\"game-sat-panel\">\n <div class=\"mode-selector\">\n <i class=\"fas fa-graduation-cap\"><\/i> <strong>Choose Your Quiz Mode<\/strong>\n <div class=\"mode-buttons\">\n <button id=\"modeSAT\" class=\"mode-btn sat\"><i class=\"fas fa-brain\"><\/i> SAT<\/button>\n <button id=\"modePSAT\" class=\"mode-btn psat\"><i class=\"fas fa-pen-fancy\"><\/i> PSAT<\/button>\n <button id=\"modeACT\" class=\"mode-btn act\"><i class=\"fas fa-bolt\"><\/i> ACT<\/button>\n <\/div>\n <\/div>\n <div class=\"quiz-header\">\n <h3 id=\"modeTitle\"><i class=\"fas fa-brain\"><\/i> SAT \u2726 Dorian Gray \u2014 Righteousness Prep<\/h3>\n <div class=\"score-area\"><i class=\"fas fa-star\"><\/i> Score: <span id=\"scoreValue\">0<\/span> \/ 600<\/div>\n <\/div>\n <div class=\"question-card\" id=\"quizContainer\">\n <div id=\"dynamicQuestionArea\"><\/div>\n <div id=\"feedbackArea\" class=\"feedback\"><i class=\"fas fa-info-circle\"><\/i> Select a mode above to begin.<\/div>\n <button id=\"nextButton\" class=\"next-btn\" style=\"display: none;\"><i class=\"fas fa-arrow-right\"><\/i> Next Question<\/button>\n <button id=\"restartButton\" class=\"restart-btn\"><i class=\"fas fa-undo-alt\"><\/i> Restart Quiz<\/button>\n <div class=\"game-status\"><i class=\"fas fa-hourglass-half\"><\/i> 6 questions per mode \u2022 Dorian Gray & righteousness<\/div>\n <\/div>\n <\/div>\n <\/div>\n <footer>\n <i class=\"fas fa-chess-queen\"><\/i> The Righteous Museum \u2014 Literary Figures of Righteousness Hall\n <div class=\"disclaimer\">\n <i class=\"fas fa-balance-scale\"><\/i> This educational tool is not affiliated with or endorsed by any rights holders. All content is for educational and research purposes under fair use. <em>The Picture of Dorian Gray<\/em> is in the public domain.\n <\/div>\n <\/footer>\n<\/div>\n\n<script>\n \/\/ ========== DORIAN GRAY QUESTION BANKS ==========\n\n \/\/ SAT Style \u2014 Analytical, cause\/effect, thematic\n const SAT_QUESTIONS = [\n { \n text: \"Dorian Gray's decision to trade his soul for eternal youth is most significant as a commentary on:\", \n options: [\"The value of art over life\", \"The American Dream and moral corruption\", \"The dangers of valuing appearance over substance\", \"The importance of education\"], \n correct: 2, \n explanation: \"Dorian prioritizes external beauty over internal virtue, leading to his moral decay.\"\n },\n { \n text: \"The portrait's transformation throughout the novel serves primarily as:\", \n options: [\"A work of art\", \"A symbol of Dorian's hidden conscience\", \"A decoration\", \"A gift from Basil Hallward\"], \n correct: 1, \n explanation: \"The portrait reflects Dorian's moral state, becoming hideous as his soul decays.\"\n },\n { \n text: \"Lord Henry Wotton's philosophy of hedonism is dangerous because it:\", \n options: [\"Encourages hard work\", \"Promotes self-sacrifice\", \"Justifies immoral actions in the name of pleasure\", \"Rejects all forms of art\"], \n correct: 2, \n explanation: \"Lord Henry's 'new Hedonism' leads Dorian to pursue pleasure without moral restraint.\"\n },\n { \n text: \"Basil Hallward's murder is significant because it represents:\", \n options: [\"The triumph of art\", \"Dorian's final crossing into irredeemable evil\", \"The power of love\", \"The death of creativity\"], \n correct: 1, \n explanation: \"Killing Basil, the artist who loved him, shows Dorian has completely lost his moral compass.\"\n },\n { \n text: \"Dorian's attempt to destroy the portrait at the end of the novel results in:\", \n options: [\"His redemption\", \"His death and the portrait's restoration\", \"The destruction of the painting\", \"His escape from guilt\"], \n correct: 1, \n explanation: \"Dorian stabs the portrait and dies; the portrait is restored to its original beauty.\"\n },\n { \n text: \"The novel's central theme regarding righteousness is that:\", \n options: [\"Beauty is the only virtue\", \"One can escape moral consequences through wealth\", \"The soul cannot be hidden and justice always comes\", \"Art is superior to morality\"], \n correct: 2, \n explanation: \"Dorian's hidden sins are exposed on the portrait, and his attempt to destroy it results in his death.\"\n }\n ];\n\n \/\/ PSAT Style \u2014 Main idea, vocabulary, simpler inference\n const PSAT_QUESTIONS = [\n { \n text: \"The term 'hedonism' as used in the context of Dorian Gray most nearly means:\", \n options: [\"The pursuit of knowledge\", \"The pursuit of pleasure as life's highest good\", \"The study of art\", \"The practice of self-denial\"], \n correct: 1, \n explanation: \"Hedonism is the belief that pleasure is the most important thing in life.\"\n },\n { \n text: \"Dorian Gray's 'fatal wish' is that:\", \n options: [\"He would become rich\", \"He would never grow old\", \"He would become famous\", \"He would fall in love\"], \n correct: 1, \n explanation: \"Dorian wishes that his portrait would age while he remains forever young.\"\n },\n { \n text: \"Lord Henry Wotton's influence on Dorian is best described as:\", \n options: [\"Positive and uplifting\", \"Neutral and harmless\", \"Corrupting and dangerous\", \"Educational and moral\"], \n correct: 2, \n explanation: \"Lord Henry introduces Dorian to a philosophy that encourages selfishness and immorality.\"\n },\n { \n text: \"The 'portrait' in the novel represents:\", \n options: [\"Dorian's wealth\", \"Dorian's hidden soul\", \"Dorian's education\", \"Dorian's family\"], \n correct: 1, \n explanation: \"The portrait reflects the state of Dorian's soul, aging and decaying with his sins.\"\n },\n { \n text: \"Oscar Wilde's novel explores which main theme?\", \n options: [\"The importance of political action\", \"The dangers of prioritizing appearance over inner goodness\", \"The value of military service\", \"The history of London\"], \n correct: 1, \n explanation: \"The novel critiques a society that values beauty and youth above truth and morality.\"\n },\n { \n text: \"The ending of the novel suggests that:\", \n options: [\"Dorian is forgiven\", \"The portrait was a dream\", \"Corruption ultimately destroys the one who embraces it\", \"Beauty is eternal\"], \n correct: 2, \n explanation: \"Dorian's death serves as a warning: a life without morality leads to destruction.\"\n }\n ];\n\n \/\/ ACT Style \u2014 Detail recall, factual accuracy, chronological\n const ACT_QUESTIONS = [\n { \n text: \"Dorian Gray's portrait was painted by:\", \n options: [\"Lord Henry Wotton\", \"Basil Hallward\", \"Sibyl Vane\", \"Alan Campbell\"], \n correct: 1, \n explanation: \"Basil Hallward is the artist who paints the portrait and later is murdered by Dorian.\"\n },\n { \n text: \"What happens to Dorian's engagement to Sibyl Vane?\", \n options: [\"They marry and live happily\", \"He rejects her, and she commits suicide\", \"She leaves him\", \"He falls in love with someone else\"], \n correct: 1, \n explanation: \"Dorian cruelly rejects Sibyl after a poor performance, leading to her suicide.\"\n },\n { \n text: \"Dorian Gray was written by:\", \n options: [\"Charles Dickens\", \"Oscar Wilde\", \"George Orwell\", \"Mary Shelley\"], \n correct: 1, \n explanation: \"Oscar Wilde is the author of The Picture of Dorian Gray, published in 1890.\"\n },\n { \n text: \"The year of Dorian Gray's first publication in book form is:\", \n options: [\"1880\", \"1891\", \"1901\", \"1910\"], \n correct: 1, \n explanation: \"The novel was first published in book form in 1891, after appearing in Lippincott's in 1890.\"\n },\n { \n text: \"What ultimately happens to Basil Hallward?\", \n options: [\"He moves abroad\", \"He becomes famous\", \"Dorian kills him\", \"He forgives Dorian\"], \n correct: 2, \n explanation: \"Dorian murders Basil Hallward and then blackmails Alan Campbell to dispose of the body.\"\n },\n { \n text: \"The country of the novel's setting is:\", \n options: [\"France\", \"America\", \"England\", \"Italy\"], \n correct: 2, \n explanation: \"The novel is set in late-Victorian London, England.\"\n }\n ];\n\n let currentMode = \"SAT\";\n let currentQuestions = [...SAT_QUESTIONS];\n let currentIndex = 0;\n let playerScore = 0;\n let quizAnswered = false;\n let selectedOptIdx = null;\n let totalPerMode = 6;\n\n \/\/ DOM elements\n const dynamicArea = document.getElementById(\"dynamicQuestionArea\");\n const feedbackDiv = document.getElementById(\"feedbackArea\");\n const nextBtn = document.getElementById(\"nextButton\");\n const restartBtn = document.getElementById(\"restartButton\");\n const scoreSpan = document.getElementById(\"scoreValue\");\n const modeTitle = document.getElementById(\"modeTitle\");\n\n function updateScoreUI() {\n scoreSpan.innerText = playerScore;\n }\n\n function loadMode(mode) {\n currentMode = mode;\n if (mode === \"SAT\") currentQuestions = [...SAT_QUESTIONS];\n else if (mode === \"PSAT\") currentQuestions = [...PSAT_QUESTIONS];\n else currentQuestions = [...ACT_QUESTIONS];\n \n let icon = mode === \"SAT\" ? '<i class=\"fas fa-brain\"><\/i>' : (mode === \"PSAT\" ? '<i class=\"fas fa-pen-fancy\"><\/i>' : '<i class=\"fas fa-bolt\"><\/i>');\n modeTitle.innerHTML = `${icon} ${mode} \u2726 Dorian Gray \u2014 Righteousness Prep`;\n \n currentIndex = 0;\n playerScore = 0;\n quizAnswered = false;\n selectedOptIdx = null;\n updateScoreUI();\n nextBtn.style.display = \"none\";\n feedbackDiv.innerHTML = `<i class=\"fas fa-check-circle\"><\/i> ${mode} mode activated. Answer 6 questions about Dorian Gray's moral journey.`;\n renderQuestion();\n \n document.querySelectorAll('.mode-btn').forEach(btn => btn.classList.remove('active'));\n if (mode === \"SAT\") document.getElementById(\"modeSAT\").classList.add('active');\n if (mode === \"PSAT\") document.getElementById(\"modePSAT\").classList.add('active');\n if (mode === \"ACT\") document.getElementById(\"modeACT\").classList.add('active');\n }\n\n function renderQuestion() {\n if (currentIndex >= totalPerMode) {\n dynamicArea.innerHTML = `\n <div style=\"text-align:center; padding:20px;\">\n <i class=\"fas fa-trophy\" style=\"font-size:3rem; color:#d4af37;\"><\/i>\n <h3>${currentMode} Complete!<\/h3>\n <p>Your score: ${playerScore} \/ ${totalPerMode*100}<\/p>\n <p><i class=\"fas fa-medal\"><\/i> ${getFinalMessage()}<\/p>\n <i class=\"fas fa-sync-alt\"><\/i> Switch exam mode or press Restart.\n <\/div>\n `;\n nextBtn.style.display = \"none\";\n quizAnswered = true;\n return;\n }\n\n const q = currentQuestions[currentIndex];\n let optionsHtml = '';\n const letters = ['A', 'B', 'C', 'D'];\n q.options.forEach((opt, idx) => {\n let disabledAttr = quizAnswered ? 'disabled' : '';\n let extraClass = '';\n if (quizAnswered) {\n if (idx === q.correct) extraClass = 'correct-highlight';\n else if (idx === selectedOptIdx && idx !== q.correct) extraClass = 'wrong-highlight';\n }\n optionsHtml += `\n <button class=\"opt-btn ${extraClass}\" data-opt-index=\"${idx}\" ${disabledAttr}>\n <i class=\"fas ${idx === 0 ? 'fa-circle' : (idx === 1 ? 'fa-dot-circle' : (idx === 2 ? 'fa-record-vinyl' : 'fa-stop'))}\"><\/i>\n <strong>${letters[idx]}.<\/strong> ${escapeHtml(opt)}\n <\/button>\n `;\n });\n\n const progressHtml = `<div class=\"game-status\" style=\"margin-bottom:12px;\"><i class=\"fas fa-question-circle\"><\/i> Question ${currentIndex+1} of ${totalPerMode} (${currentMode})<\/div>`;\n const questionHtml = `\n ${progressHtml}\n <div class=\"question-text\"><i class=\"fas fa-gavel\"><\/i> ${escapeHtml(q.text)}<\/div>\n <div class=\"options-list\" id=\"optionsList\">${optionsHtml}<\/div>\n `;\n dynamicArea.innerHTML = questionHtml;\n\n if (!quizAnswered) {\n document.querySelectorAll('.opt-btn').forEach(btn => {\n btn.addEventListener('click', (e) => {\n if (quizAnswered) return;\n const chosenIdx = parseInt(btn.getAttribute('data-opt-index'));\n handleAnswer(chosenIdx);\n });\n });\n }\n }\n\n function handleAnswer(chosenIdx) {\n if (quizAnswered) return;\n const q = currentQuestions[currentIndex];\n const isCorrect = (chosenIdx === q.correct);\n selectedOptIdx = chosenIdx;\n if (isCorrect) {\n playerScore += 100;\n updateScoreUI();\n feedbackDiv.innerHTML = `<i class=\"fas fa-check-circle\" style=\"color:#2e7d32;\"><\/i> ${q.explanation} <i class=\"fas fa-award\"><\/i> +100 points`;\n } else {\n const correctLetter = String.fromCharCode(65 + q.correct);\n const correctText = q.options[q.correct];\n feedbackDiv.innerHTML = `<i class=\"fas fa-times-circle\" style=\"color:#b71c1c;\"><\/i> Incorrect. Correct answer: ${correctLetter}: ${escapeHtml(correctText)}.<br> ${q.explanation}`;\n }\n quizAnswered = true;\n renderQuestion();\n nextBtn.style.display = \"block\";\n }\n\n function nextQuestion() {\n if (!quizAnswered && currentIndex < totalPerMode) {\n feedbackDiv.innerHTML = `<i class=\"fas fa-exclamation-triangle\"><\/i> Please answer before continuing.`;\n return;\n }\n if (currentIndex + 1 <= totalPerMode) {\n currentIndex++;\n quizAnswered = false;\n selectedOptIdx = null;\n nextBtn.style.display = \"none\";\n if (currentIndex < totalPerMode) {\n feedbackDiv.innerHTML = `<i class=\"fas fa-lightbulb\"><\/i> Read carefully, then choose the best answer.`;\n renderQuestion();\n } else {\n renderQuestion();\n nextBtn.style.display = \"none\";\n }\n }\n }\n\n function restartQuiz() {\n loadMode(currentMode);\n }\n\n function getFinalMessage() {\n let maxScore = totalPerMode * 100;\n if (playerScore === maxScore) return ` Perfect ${currentMode} score! You understand Dorian's moral tragedy.`;\n if (playerScore >= 400) return ` Strong ${currentMode} readiness! Beauty without goodness is hollow.`;\n return ` Review Dorian's story and try again. The soul cannot be hidden.`;\n }\n\n function escapeHtml(str) {\n return str.replace(\/[&<>]\/g, function(m) {\n if (m === '&') return '&';\n if (m === '<') return '<';\n if (m === '>') return '>';\n return m;\n });\n }\n\n \/\/ Event bindings\n document.getElementById(\"modeSAT\").addEventListener(\"click\", () => loadMode(\"SAT\"));\n document.getElementById(\"modePSAT\").addEventListener(\"click\", () => loadMode(\"PSAT\"));\n document.getElementById(\"modeACT\").addEventListener(\"click\", () => loadMode(\"ACT\"));\n nextBtn.addEventListener(\"click\", nextQuestion);\n restartBtn.addEventListener(\"click\", restartQuiz);\n \n \/\/ Initialize with SAT\n loadMode(\"SAT\");\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Dorian Gray \u2014 The Beautiful Corrupt | Righteous Museum Dorian Gray \u2014 The Beautiful Corrupt Literary Quiz A beautiful man traded his soul for eternal youth, proving inner corruption destroys all. The Portrait The Tragic Tale of Beauty & Corruption Dorian Gray is the protagonist of Oscar Wilde’s only novel, first published in 1890. A […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1688","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/1688","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/comments?post=1688"}],"version-history":[{"count":1,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/1688\/revisions"}],"predecessor-version":[{"id":1689,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/1688\/revisions\/1689"}],"wp:attachment":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/media?parent=1688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1688,"date":"2026-07-14T19:54:51","date_gmt":"2026-07-14T19:54:51","guid":{"rendered":"https:\/\/museum.wiserighteous.org\/?page_id=1688"},"modified":"2026-07-14T19:54:51","modified_gmt":"2026-07-14T19:54:51","slug":"quiz-dorian-gray-the-beautiful-corrupt","status":"publish","type":"page","link":"https:\/\/museum.wiserighteous.org\/index.php\/quiz-dorian-gray-the-beautiful-corrupt\/","title":{"rendered":"Quiz: Dorian Gray \u2014 The Beautiful Corrupt"},"content":{"rendered":"\n\n\n\n \n \n Dorian Gray \u2014 The Beautiful Corrupt | Righteous Museum<\/title>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n background: #1a1a2e;\n font-family: 'Georgia', 'Times New Roman', Times, serif;\n color: #2c2b28;\n line-height: 1.5;\n padding: 20px;\n }\n\n .museum-container {\n max-width: 1400px;\n margin: 0 auto;\n background: #fef7e0;\n border-radius: 28px;\n box-shadow: 0 20px 35px rgba(0,0,0,0.3), 0 0 0 1px #c9a87b inset;\n overflow: hidden;\n }\n\n .hero {\n background: linear-gradient(135deg, #2c2c3a 0%, #1a1a2a 100%);\n padding: 1.8rem 2.5rem;\n border-bottom: 6px solid #d4af37;\n color: #f5e7cf;\n display: flex;\n align-items: center;\n gap: 20px;\n flex-wrap: wrap;\n }\n .hero-text {\n flex: 2;\n }\n .hero h1 {\n font-size: 2rem;\n letter-spacing: 1px;\n font-weight: 600;\n }\n .hero h1 i {\n color: #d4af37;\n margin-right: 10px;\n }\n .hero h1 .app-badge {\n font-size: 0.8rem;\n background: #d4af3733;\n padding: 0.2rem 0.8rem;\n border-radius: 40px;\n margin-left: 12px;\n vertical-align: middle;\n }\n .hero p {\n font-size: 1rem;\n font-style: italic;\n margin-top: 0.5rem;\n opacity: 0.85;\n }\n .hero-portrait {\n flex: 0 0 100px;\n text-align: center;\n background: #d4af3730;\n padding: 8px;\n border-radius: 50%;\n border: 2px solid #d4af37;\n }\n .hero-portrait i {\n font-size: 3.5rem;\n color: #ecd9b4;\n }\n .hero-portrait p {\n font-size: 0.65rem;\n margin-top: 5px;\n }\n\n .flex-main {\n display: flex;\n flex-wrap: wrap;\n }\n .article-panel {\n flex: 1.6;\n min-width: 280px;\n padding: 2rem 2rem 2rem 2.2rem;\n background: #fffaf2;\n border-right: 1px solid #ecd9b4;\n }\n .game-sat-panel {\n flex: 1.2;\n min-width: 350px;\n background: #f9efdf;\n padding: 2rem 1.8rem;\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n }\n\n .article-panel h2 {\n font-size: 1.8rem;\n border-left: 7px solid #d4af37;\n padding-left: 1rem;\n margin: 0.75rem 0 1rem 0;\n color: #2d482b;\n }\n .article-panel h2 i {\n color: #d4af37;\n margin-right: 10px;\n }\n .article-panel h3 {\n font-size: 1.3rem;\n margin: 1.4rem 0 0.5rem 0;\n color: #8b5a2b;\n font-weight: 600;\n }\n .article-panel p {\n margin-bottom: 0.9rem;\n text-align: justify;\n }\n .article-panel blockquote {\n margin: 1rem 0;\n padding: 0.8rem 1.5rem;\n background: #f3eddd;\n border-left: 5px solid #d4af37;\n border-radius: 8px;\n font-style: italic;\n color: #4a3a2a;\n }\n .article-panel blockquote i {\n color: #d4af37;\n margin-right: 8px;\n }\n .events-grid {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin: 15px 0;\n }\n .event-badge {\n background: #e9e0cf;\n padding: 6px 14px;\n border-radius: 40px;\n font-size: 0.8rem;\n border: 1px solid #cfb37a;\n }\n .event-badge i {\n margin-right: 6px;\n font-size: 0.7rem;\n }\n .inset-quote {\n background: #e9e0cf;\n padding: 0.8rem 1.3rem;\n border-left: 4px solid #d4af37;\n margin: 1.2rem 0;\n border-radius: 12px;\n font-weight: 500;\n }\n .timeline-item {\n margin: 12px 0;\n padding-left: 20px;\n border-left: 3px solid #d4af37;\n }\n .timeline-year {\n font-weight: bold;\n color: #8b5a2b;\n }\n .reference-list {\n font-size: 0.8rem;\n margin-top: 1.5rem;\n border-top: 1px dashed #cfbc93;\n padding-top: 1rem;\n color: #5e4b2b;\n }\n .figure-placeholder {\n background: #2d2d3a;\n border-radius: 16px;\n padding: 1.2rem;\n margin: 1.2rem 0;\n color: #e5dccb;\n }\n .figure-placeholder i {\n font-size: 2.5rem;\n color: #d4af37;\n }\n .figure-placeholder .fig-caption {\n font-size: 0.8rem;\n font-style: italic;\n margin-top: 6px;\n opacity: 0.8;\n }\n\n \/* Mode Selection & Quiz Styles *\/\n .mode-selector {\n background: white;\n border-radius: 28px;\n padding: 1.2rem;\n text-align: center;\n box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n }\n .mode-buttons {\n display: flex;\n gap: 12px;\n justify-content: center;\n margin-top: 12px;\n flex-wrap: wrap;\n }\n .mode-btn {\n flex: 1;\n min-width: 90px;\n padding: 12px;\n border: none;\n border-radius: 60px;\n font-weight: bold;\n font-size: 1rem;\n cursor: pointer;\n transition: 0.2s;\n font-family: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n }\n .mode-btn.sat {\n background: #1e3a2f;\n color: white;\n }\n .mode-btn.psat {\n background: #2c5f6e;\n color: white;\n }\n .mode-btn.act {\n background: #8b5a2b;\n color: white;\n }\n .mode-btn:hover {\n transform: translateY(-2px);\n filter: brightness(1.05);\n }\n .mode-btn.active {\n box-shadow: 0 0 0 3px #ffd966;\n }\n .quiz-header {\n background: linear-gradient(145deg, #2c4b3e, #1e3a2f);\n color: white;\n padding: 1rem;\n border-radius: 28px;\n text-align: center;\n }\n .score-area {\n font-size: 1.6rem;\n font-weight: bold;\n background: #00000055;\n display: inline-block;\n padding: 0.2rem 1.2rem;\n border-radius: 40px;\n margin-top: 8px;\n }\n .question-card {\n background: white;\n border-radius: 28px;\n padding: 1.5rem;\n box-shadow: 0 8px 18px rgba(0,0,0,0.1);\n }\n .question-text {\n font-size: 1.1rem;\n font-weight: 700;\n margin-bottom: 1.2rem;\n background: #fdf4e0;\n padding: 12px;\n border-radius: 20px;\n border-left: 5px solid #d4af37;\n }\n .options-list {\n display: flex;\n flex-direction: column;\n gap: 10px;\n margin-bottom: 1.5rem;\n }\n .opt-btn {\n background: #efe2cf;\n border: 2px solid #cfb37a;\n padding: 10px 14px;\n border-radius: 60px;\n font-family: 'Segoe UI', 'Georgia', serif;\n font-size: 0.9rem;\n text-align: left;\n cursor: pointer;\n transition: 0.2s;\n }\n .opt-btn i {\n margin-right: 10px;\n }\n .opt-btn:hover:not(:disabled) {\n background: #e2cfb0;\n }\n .opt-btn.correct-highlight {\n background: #a5d6a5;\n border-color: #2e7d32;\n }\n .opt-btn.wrong-highlight {\n background: #ef9a9a;\n border-color: #c62828;\n }\n .opt-btn:disabled {\n cursor: default;\n opacity: 0.8;\n }\n .feedback {\n margin-top: 15px;\n padding: 12px;\n border-radius: 20px;\n background: #f3efdf;\n font-size: 0.9rem;\n border-left: 5px solid #d4af37;\n }\n .next-btn, .restart-btn {\n background: #846c3e;\n border: none;\n color: white;\n font-weight: bold;\n padding: 10px;\n border-radius: 40px;\n font-size: 1rem;\n cursor: pointer;\n margin-top: 10px;\n width: 100%;\n }\n .next-btn:hover, .restart-btn:hover {\n background: #5f4a2a;\n }\n .game-status {\n font-size: 0.75rem;\n text-align: center;\n background: #e2d5bd;\n padding: 6px;\n border-radius: 50px;\n margin-top: 8px;\n }\n footer {\n text-align: center;\n padding: 1rem;\n background: #dfd2b6;\n font-size: 0.7rem;\n color: #4a3a22;\n }\n .disclaimer {\n font-size: 0.65rem;\n text-align: center;\n margin-top: 8px;\n color: #6b5a3e;\n }\n @media (max-width: 780px) {\n .hero h1 { font-size: 1.3rem; }\n .hero-portrait { flex-basis: 70px; }\n .hero-portrait i { font-size: 2.2rem; }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"museum-container\">\n <div class=\"hero\">\n <div class=\"hero-text\">\n <h1><i class=\"fas fa-theater-masks\"><\/i> Dorian Gray \u2014 The Beautiful Corrupt <span class=\"app-badge\"><i class=\"fas fa-mobile-alt\"><\/i> Literary Quiz<\/span><\/h1>\n <p><i class=\"fas fa-book-open\"><\/i> A beautiful man traded his soul for eternal youth, proving inner corruption destroys all.<\/p>\n <\/div>\n <div class=\"hero-portrait\">\n <i class=\"fas fa-paint-brush\"><\/i>\n <p><i class=\"fas fa-skull\"><\/i> The Portrait<\/p>\n <\/div>\n <\/div>\n\n <div class=\"flex-main\">\n <div class=\"article-panel\">\n <h2><i class=\"fas fa-palette\"><\/i> The Tragic Tale of Beauty & Corruption<\/h2>\n <p>Dorian Gray is the protagonist of Oscar Wilde’s only novel, first published in 1890. A young man of extraordinary beauty, he is introduced to the hedonistic worldview of Lord Henry Wotton, who argues that beauty and sensual fulfillment are the only things worth pursuing in life. Distressed by the realization that his beauty will fade with age, Dorian makes a fateful wish: he would give his soul if his portrait would age and decay while he remained forever young and handsome.<\/p>\n\n <div class=\"events-grid\">\n <span class=\"event-badge\"><i class=\"fas fa-mask\"><\/i> Beauty & Morality<\/span>\n <span class=\"event-badge\"><i class=\"fas fa-skull\"><\/i> The Portrait<\/span>\n <span class=\"event-badge\"><i class=\"fas fa-gavel\"><\/i> Conscience<\/span>\n <span class=\"event-badge\"><i class=\"fas fa-heart-broken\"><\/i> Corruption<\/span>\n <span class=\"event-badge\"><i class=\"fas fa-book\"><\/i> Gothic Fiction<\/span>\n <\/div>\n\n <h3><i class=\"fas fa-question-circle\"><\/i> The Righteous Dilemma<\/h3>\n <p>Dorian Gray’s story forces us to confront a fundamental question: <strong>When the pursuit of beauty and pleasure becomes life’s highest goal, what happens to the soul?<\/strong><\/p>\n <p>Dorian embraces a philosophy of indulgence without restraint. He ruins reputations, destroys lives, and commits murder\u2014yet his face remains untouched, his youth preserved. The portrait bears the weight of his sins, allowing Dorian to live as if there were no consequences. But the portrait is not just a painting\u2014it is his conscience made visible. The novel ultimately argues that <strong>a life without moral restraint is not freedom\u2014it is slavery to one’s own desires<\/strong>.<\/p>\n\n <blockquote><i class=\"fas fa-quote-left\"><\/i> “I knew nothing but shadows, and I thought them real. You came\u2014oh, my beautiful love!\u2014and you freed my soul from prison.”<\/blockquote>\n\n <div class=\"figure-placeholder\">\n <i class=\"fas fa-paint-brush\"><\/i> <strong>Figure 1 \u2014 Dorian: The Beautiful Mask<\/strong>\n <p><em>A strikingly beautiful young man stares at his portrait\u2014the contrast between his flawless face and the portrait’s grotesque decay captures the confrontation between appearance and reality.<\/em><\/p>\n <p class=\"fig-caption\"><i class=\"fas fa-image\"><\/i> AI Prompt: Victorian Gothic, dramatic chiaroscuro, oil painting texture.<\/p>\n <\/div>\n\n <h3><i class=\"fas fa-gem\"><\/i> Key Lessons on Righteousness<\/h3>\n <ul style=\"padding-left: 1.5rem; margin-bottom: 1rem;\">\n <li><strong>The soul cannot be hidden<\/strong> \u2014 No matter how perfect the exterior, the soul bears the marks of every choice.<\/li>\n <li><strong>Beauty without goodness is hollow<\/strong> \u2014 True beauty requires integrity of character.<\/li>\n <li><strong>Conscience cannot be silenced<\/strong> \u2014 The voice of conscience will always find a way to speak.<\/li>\n <li><strong>Vanity is a form of idolatry<\/strong> \u2014 When we worship ourselves, we destroy what is most valuable in us.<\/li>\n <li><strong>Consequences cannot be avoided<\/strong> \u2014 Justice always comes.<\/li>\n <\/ul>\n\n <div class=\"reference-list\">\n <i class=\"fas fa-book-open\"><\/i> <strong>References:<\/strong> Wilde, O. (1890). <em>The Picture of Dorian Gray<\/em>. Lippincott’s Monthly Magazine. Public domain.\n <\/div>\n <\/div>\n\n <div class=\"game-sat-panel\">\n <div class=\"mode-selector\">\n <i class=\"fas fa-graduation-cap\"><\/i> <strong>Choose Your Quiz Mode<\/strong>\n <div class=\"mode-buttons\">\n <button id=\"modeSAT\" class=\"mode-btn sat\"><i class=\"fas fa-brain\"><\/i> SAT<\/button>\n <button id=\"modePSAT\" class=\"mode-btn psat\"><i class=\"fas fa-pen-fancy\"><\/i> PSAT<\/button>\n <button id=\"modeACT\" class=\"mode-btn act\"><i class=\"fas fa-bolt\"><\/i> ACT<\/button>\n <\/div>\n <\/div>\n <div class=\"quiz-header\">\n <h3 id=\"modeTitle\"><i class=\"fas fa-brain\"><\/i> SAT \u2726 Dorian Gray \u2014 Righteousness Prep<\/h3>\n <div class=\"score-area\"><i class=\"fas fa-star\"><\/i> Score: <span id=\"scoreValue\">0<\/span> \/ 600<\/div>\n <\/div>\n <div class=\"question-card\" id=\"quizContainer\">\n <div id=\"dynamicQuestionArea\"><\/div>\n <div id=\"feedbackArea\" class=\"feedback\"><i class=\"fas fa-info-circle\"><\/i> Select a mode above to begin.<\/div>\n <button id=\"nextButton\" class=\"next-btn\" style=\"display: none;\"><i class=\"fas fa-arrow-right\"><\/i> Next Question<\/button>\n <button id=\"restartButton\" class=\"restart-btn\"><i class=\"fas fa-undo-alt\"><\/i> Restart Quiz<\/button>\n <div class=\"game-status\"><i class=\"fas fa-hourglass-half\"><\/i> 6 questions per mode \u2022 Dorian Gray & righteousness<\/div>\n <\/div>\n <\/div>\n <\/div>\n <footer>\n <i class=\"fas fa-chess-queen\"><\/i> The Righteous Museum \u2014 Literary Figures of Righteousness Hall\n <div class=\"disclaimer\">\n <i class=\"fas fa-balance-scale\"><\/i> This educational tool is not affiliated with or endorsed by any rights holders. All content is for educational and research purposes under fair use. <em>The Picture of Dorian Gray<\/em> is in the public domain.\n <\/div>\n <\/footer>\n<\/div>\n\n<script>\n \/\/ ========== DORIAN GRAY QUESTION BANKS ==========\n\n \/\/ SAT Style \u2014 Analytical, cause\/effect, thematic\n const SAT_QUESTIONS = [\n { \n text: \"Dorian Gray's decision to trade his soul for eternal youth is most significant as a commentary on:\", \n options: [\"The value of art over life\", \"The American Dream and moral corruption\", \"The dangers of valuing appearance over substance\", \"The importance of education\"], \n correct: 2, \n explanation: \"Dorian prioritizes external beauty over internal virtue, leading to his moral decay.\"\n },\n { \n text: \"The portrait's transformation throughout the novel serves primarily as:\", \n options: [\"A work of art\", \"A symbol of Dorian's hidden conscience\", \"A decoration\", \"A gift from Basil Hallward\"], \n correct: 1, \n explanation: \"The portrait reflects Dorian's moral state, becoming hideous as his soul decays.\"\n },\n { \n text: \"Lord Henry Wotton's philosophy of hedonism is dangerous because it:\", \n options: [\"Encourages hard work\", \"Promotes self-sacrifice\", \"Justifies immoral actions in the name of pleasure\", \"Rejects all forms of art\"], \n correct: 2, \n explanation: \"Lord Henry's 'new Hedonism' leads Dorian to pursue pleasure without moral restraint.\"\n },\n { \n text: \"Basil Hallward's murder is significant because it represents:\", \n options: [\"The triumph of art\", \"Dorian's final crossing into irredeemable evil\", \"The power of love\", \"The death of creativity\"], \n correct: 1, \n explanation: \"Killing Basil, the artist who loved him, shows Dorian has completely lost his moral compass.\"\n },\n { \n text: \"Dorian's attempt to destroy the portrait at the end of the novel results in:\", \n options: [\"His redemption\", \"His death and the portrait's restoration\", \"The destruction of the painting\", \"His escape from guilt\"], \n correct: 1, \n explanation: \"Dorian stabs the portrait and dies; the portrait is restored to its original beauty.\"\n },\n { \n text: \"The novel's central theme regarding righteousness is that:\", \n options: [\"Beauty is the only virtue\", \"One can escape moral consequences through wealth\", \"The soul cannot be hidden and justice always comes\", \"Art is superior to morality\"], \n correct: 2, \n explanation: \"Dorian's hidden sins are exposed on the portrait, and his attempt to destroy it results in his death.\"\n }\n ];\n\n \/\/ PSAT Style \u2014 Main idea, vocabulary, simpler inference\n const PSAT_QUESTIONS = [\n { \n text: \"The term 'hedonism' as used in the context of Dorian Gray most nearly means:\", \n options: [\"The pursuit of knowledge\", \"The pursuit of pleasure as life's highest good\", \"The study of art\", \"The practice of self-denial\"], \n correct: 1, \n explanation: \"Hedonism is the belief that pleasure is the most important thing in life.\"\n },\n { \n text: \"Dorian Gray's 'fatal wish' is that:\", \n options: [\"He would become rich\", \"He would never grow old\", \"He would become famous\", \"He would fall in love\"], \n correct: 1, \n explanation: \"Dorian wishes that his portrait would age while he remains forever young.\"\n },\n { \n text: \"Lord Henry Wotton's influence on Dorian is best described as:\", \n options: [\"Positive and uplifting\", \"Neutral and harmless\", \"Corrupting and dangerous\", \"Educational and moral\"], \n correct: 2, \n explanation: \"Lord Henry introduces Dorian to a philosophy that encourages selfishness and immorality.\"\n },\n { \n text: \"The 'portrait' in the novel represents:\", \n options: [\"Dorian's wealth\", \"Dorian's hidden soul\", \"Dorian's education\", \"Dorian's family\"], \n correct: 1, \n explanation: \"The portrait reflects the state of Dorian's soul, aging and decaying with his sins.\"\n },\n { \n text: \"Oscar Wilde's novel explores which main theme?\", \n options: [\"The importance of political action\", \"The dangers of prioritizing appearance over inner goodness\", \"The value of military service\", \"The history of London\"], \n correct: 1, \n explanation: \"The novel critiques a society that values beauty and youth above truth and morality.\"\n },\n { \n text: \"The ending of the novel suggests that:\", \n options: [\"Dorian is forgiven\", \"The portrait was a dream\", \"Corruption ultimately destroys the one who embraces it\", \"Beauty is eternal\"], \n correct: 2, \n explanation: \"Dorian's death serves as a warning: a life without morality leads to destruction.\"\n }\n ];\n\n \/\/ ACT Style \u2014 Detail recall, factual accuracy, chronological\n const ACT_QUESTIONS = [\n { \n text: \"Dorian Gray's portrait was painted by:\", \n options: [\"Lord Henry Wotton\", \"Basil Hallward\", \"Sibyl Vane\", \"Alan Campbell\"], \n correct: 1, \n explanation: \"Basil Hallward is the artist who paints the portrait and later is murdered by Dorian.\"\n },\n { \n text: \"What happens to Dorian's engagement to Sibyl Vane?\", \n options: [\"They marry and live happily\", \"He rejects her, and she commits suicide\", \"She leaves him\", \"He falls in love with someone else\"], \n correct: 1, \n explanation: \"Dorian cruelly rejects Sibyl after a poor performance, leading to her suicide.\"\n },\n { \n text: \"Dorian Gray was written by:\", \n options: [\"Charles Dickens\", \"Oscar Wilde\", \"George Orwell\", \"Mary Shelley\"], \n correct: 1, \n explanation: \"Oscar Wilde is the author of The Picture of Dorian Gray, published in 1890.\"\n },\n { \n text: \"The year of Dorian Gray's first publication in book form is:\", \n options: [\"1880\", \"1891\", \"1901\", \"1910\"], \n correct: 1, \n explanation: \"The novel was first published in book form in 1891, after appearing in Lippincott's in 1890.\"\n },\n { \n text: \"What ultimately happens to Basil Hallward?\", \n options: [\"He moves abroad\", \"He becomes famous\", \"Dorian kills him\", \"He forgives Dorian\"], \n correct: 2, \n explanation: \"Dorian murders Basil Hallward and then blackmails Alan Campbell to dispose of the body.\"\n },\n { \n text: \"The country of the novel's setting is:\", \n options: [\"France\", \"America\", \"England\", \"Italy\"], \n correct: 2, \n explanation: \"The novel is set in late-Victorian London, England.\"\n }\n ];\n\n let currentMode = \"SAT\";\n let currentQuestions = [...SAT_QUESTIONS];\n let currentIndex = 0;\n let playerScore = 0;\n let quizAnswered = false;\n let selectedOptIdx = null;\n let totalPerMode = 6;\n\n \/\/ DOM elements\n const dynamicArea = document.getElementById(\"dynamicQuestionArea\");\n const feedbackDiv = document.getElementById(\"feedbackArea\");\n const nextBtn = document.getElementById(\"nextButton\");\n const restartBtn = document.getElementById(\"restartButton\");\n const scoreSpan = document.getElementById(\"scoreValue\");\n const modeTitle = document.getElementById(\"modeTitle\");\n\n function updateScoreUI() {\n scoreSpan.innerText = playerScore;\n }\n\n function loadMode(mode) {\n currentMode = mode;\n if (mode === \"SAT\") currentQuestions = [...SAT_QUESTIONS];\n else if (mode === \"PSAT\") currentQuestions = [...PSAT_QUESTIONS];\n else currentQuestions = [...ACT_QUESTIONS];\n \n let icon = mode === \"SAT\" ? '<i class=\"fas fa-brain\"><\/i>' : (mode === \"PSAT\" ? '<i class=\"fas fa-pen-fancy\"><\/i>' : '<i class=\"fas fa-bolt\"><\/i>');\n modeTitle.innerHTML = `${icon} ${mode} \u2726 Dorian Gray \u2014 Righteousness Prep`;\n \n currentIndex = 0;\n playerScore = 0;\n quizAnswered = false;\n selectedOptIdx = null;\n updateScoreUI();\n nextBtn.style.display = \"none\";\n feedbackDiv.innerHTML = `<i class=\"fas fa-check-circle\"><\/i> ${mode} mode activated. Answer 6 questions about Dorian Gray's moral journey.`;\n renderQuestion();\n \n document.querySelectorAll('.mode-btn').forEach(btn => btn.classList.remove('active'));\n if (mode === \"SAT\") document.getElementById(\"modeSAT\").classList.add('active');\n if (mode === \"PSAT\") document.getElementById(\"modePSAT\").classList.add('active');\n if (mode === \"ACT\") document.getElementById(\"modeACT\").classList.add('active');\n }\n\n function renderQuestion() {\n if (currentIndex >= totalPerMode) {\n dynamicArea.innerHTML = `\n <div style=\"text-align:center; padding:20px;\">\n <i class=\"fas fa-trophy\" style=\"font-size:3rem; color:#d4af37;\"><\/i>\n <h3>${currentMode} Complete!<\/h3>\n <p>Your score: ${playerScore} \/ ${totalPerMode*100}<\/p>\n <p><i class=\"fas fa-medal\"><\/i> ${getFinalMessage()}<\/p>\n <i class=\"fas fa-sync-alt\"><\/i> Switch exam mode or press Restart.\n <\/div>\n `;\n nextBtn.style.display = \"none\";\n quizAnswered = true;\n return;\n }\n\n const q = currentQuestions[currentIndex];\n let optionsHtml = '';\n const letters = ['A', 'B', 'C', 'D'];\n q.options.forEach((opt, idx) => {\n let disabledAttr = quizAnswered ? 'disabled' : '';\n let extraClass = '';\n if (quizAnswered) {\n if (idx === q.correct) extraClass = 'correct-highlight';\n else if (idx === selectedOptIdx && idx !== q.correct) extraClass = 'wrong-highlight';\n }\n optionsHtml += `\n <button class=\"opt-btn ${extraClass}\" data-opt-index=\"${idx}\" ${disabledAttr}>\n <i class=\"fas ${idx === 0 ? 'fa-circle' : (idx === 1 ? 'fa-dot-circle' : (idx === 2 ? 'fa-record-vinyl' : 'fa-stop'))}\"><\/i>\n <strong>${letters[idx]}.<\/strong> ${escapeHtml(opt)}\n <\/button>\n `;\n });\n\n const progressHtml = `<div class=\"game-status\" style=\"margin-bottom:12px;\"><i class=\"fas fa-question-circle\"><\/i> Question ${currentIndex+1} of ${totalPerMode} (${currentMode})<\/div>`;\n const questionHtml = `\n ${progressHtml}\n <div class=\"question-text\"><i class=\"fas fa-gavel\"><\/i> ${escapeHtml(q.text)}<\/div>\n <div class=\"options-list\" id=\"optionsList\">${optionsHtml}<\/div>\n `;\n dynamicArea.innerHTML = questionHtml;\n\n if (!quizAnswered) {\n document.querySelectorAll('.opt-btn').forEach(btn => {\n btn.addEventListener('click', (e) => {\n if (quizAnswered) return;\n const chosenIdx = parseInt(btn.getAttribute('data-opt-index'));\n handleAnswer(chosenIdx);\n });\n });\n }\n }\n\n function handleAnswer(chosenIdx) {\n if (quizAnswered) return;\n const q = currentQuestions[currentIndex];\n const isCorrect = (chosenIdx === q.correct);\n selectedOptIdx = chosenIdx;\n if (isCorrect) {\n playerScore += 100;\n updateScoreUI();\n feedbackDiv.innerHTML = `<i class=\"fas fa-check-circle\" style=\"color:#2e7d32;\"><\/i> ${q.explanation} <i class=\"fas fa-award\"><\/i> +100 points`;\n } else {\n const correctLetter = String.fromCharCode(65 + q.correct);\n const correctText = q.options[q.correct];\n feedbackDiv.innerHTML = `<i class=\"fas fa-times-circle\" style=\"color:#b71c1c;\"><\/i> Incorrect. Correct answer: ${correctLetter}: ${escapeHtml(correctText)}.<br> ${q.explanation}`;\n }\n quizAnswered = true;\n renderQuestion();\n nextBtn.style.display = \"block\";\n }\n\n function nextQuestion() {\n if (!quizAnswered && currentIndex < totalPerMode) {\n feedbackDiv.innerHTML = `<i class=\"fas fa-exclamation-triangle\"><\/i> Please answer before continuing.`;\n return;\n }\n if (currentIndex + 1 <= totalPerMode) {\n currentIndex++;\n quizAnswered = false;\n selectedOptIdx = null;\n nextBtn.style.display = \"none\";\n if (currentIndex < totalPerMode) {\n feedbackDiv.innerHTML = `<i class=\"fas fa-lightbulb\"><\/i> Read carefully, then choose the best answer.`;\n renderQuestion();\n } else {\n renderQuestion();\n nextBtn.style.display = \"none\";\n }\n }\n }\n\n function restartQuiz() {\n loadMode(currentMode);\n }\n\n function getFinalMessage() {\n let maxScore = totalPerMode * 100;\n if (playerScore === maxScore) return ` Perfect ${currentMode} score! You understand Dorian's moral tragedy.`;\n if (playerScore >= 400) return ` Strong ${currentMode} readiness! Beauty without goodness is hollow.`;\n return ` Review Dorian's story and try again. The soul cannot be hidden.`;\n }\n\n function escapeHtml(str) {\n return str.replace(\/[&<>]\/g, function(m) {\n if (m === '&') return '&';\n if (m === '<') return '<';\n if (m === '>') return '>';\n return m;\n });\n }\n\n \/\/ Event bindings\n document.getElementById(\"modeSAT\").addEventListener(\"click\", () => loadMode(\"SAT\"));\n document.getElementById(\"modePSAT\").addEventListener(\"click\", () => loadMode(\"PSAT\"));\n document.getElementById(\"modeACT\").addEventListener(\"click\", () => loadMode(\"ACT\"));\n nextBtn.addEventListener(\"click\", nextQuestion);\n restartBtn.addEventListener(\"click\", restartQuiz);\n \n \/\/ Initialize with SAT\n loadMode(\"SAT\");\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Dorian Gray \u2014 The Beautiful Corrupt | Righteous Museum Dorian Gray \u2014 The Beautiful Corrupt Literary Quiz A beautiful man traded his soul for eternal youth, proving inner corruption destroys all. The Portrait The Tragic Tale of Beauty & Corruption Dorian Gray is the protagonist of Oscar Wilde’s only novel, first published in 1890. A […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1688","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/1688","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/comments?post=1688"}],"version-history":[{"count":1,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/1688\/revisions"}],"predecessor-version":[{"id":1689,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/1688\/revisions\/1689"}],"wp:attachment":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/media?parent=1688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}