{"id":1872,"date":"2025-12-22T17:35:21","date_gmt":"2025-12-22T09:35:21","guid":{"rendered":"https:\/\/invescoe.com\/?page_id=1872"},"modified":"2026-05-12T02:13:28","modified_gmt":"2026-05-11T18:13:28","slug":"technical-analysis-quiz","status":"publish","type":"page","link":"https:\/\/invescoe.com\/bn\/technical-analysis-quiz\/","title":{"rendered":"Technical Analysis Quiz"},"content":{"rendered":"
\n
\n
\n
\n
\n
<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
<\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
Sign in<\/span><\/a>GET STARTED <\/span><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
<\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
Sign in<\/span><\/a>GET STARTED <\/span><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\n
\n
<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
<\/div>\n

\/* Scope everything to this embed so it won’t mess with your theme *\/
\n #ta-quiz-app, #ta-quiz-app * { box-sizing: border-box; }<\/p>\n

#ta-quiz-app {
\n margin: 0;
\n padding: 0;
\n font-family: system-ui, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, sans-serif;
\n width: 100%;
\n }<\/p>\n

#ta-quiz-app .quiz-wrapper {
\n width: 100%;
\n min-height: 100%;
\n padding: 3rem 2rem;
\n display: flex;
\n flex-direction: column;
\n align-items: center;
\n background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
\n }<\/p>\n

#ta-quiz-app .quiz-container {
\n max-width: 700px;
\n width: 100%;
\n }<\/p>\n

#ta-quiz-app .quiz-header {
\n text-align: center;
\n margin-bottom: 2rem;
\n color: white;
\n }<\/p>\n

#ta-quiz-app .quiz-header h1 {
\n font-size: 2.5rem;
\n margin: 0 0 0.5rem 0;
\n font-weight: 700;
\n color: white;
\n }<\/p>\n

#ta-quiz-app .quiz-header p {
\n font-size: 1.125rem;
\n margin: 0;
\n opacity: 0.95;
\n }<\/p>\n

#ta-quiz-app .progress-container {
\n background: rgba(255, 255, 255, 0.2);
\n border-radius: 50px;
\n height: 12px;
\n margin-bottom: 2rem;
\n overflow: hidden;
\n }<\/p>\n

#ta-quiz-app .progress-bar {
\n height: 100%;
\n background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
\n border-radius: 50px;
\n transition: width 0.4s ease;
\n box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
\n width: 0%;
\n }<\/p>\n

#ta-quiz-app .question-card {
\n background: #252539;
\n border-radius: 20px;
\n padding: 2.5rem;
\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
\n margin-bottom: 1.5rem;
\n transition: transform 0.3s ease;
\n }<\/p>\n

#ta-quiz-app .question-number {
\n display: inline-block;
\n background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
\n color: white;
\n padding: 0.5rem 1rem;
\n border-radius: 50px;
\n font-size: 0.875rem;
\n font-weight: 600;
\n margin-bottom: 1.5rem;
\n }<\/p>\n

#ta-quiz-app .question-text {
\n font-size: 1.5rem;
\n font-weight: 600;
\n color: #e0e0e0;
\n margin: 0 0 2rem 0;
\n line-height: 1.4;
\n }<\/p>\n

#ta-quiz-app .chart-icon {
\n display: inline-block;
\n margin-right: 0.5rem;
\n font-size: 1.75rem;
\n }<\/p>\n

#ta-quiz-app .options-container {
\n display: flex;
\n flex-direction: column;
\n gap: 1rem;
\n }<\/p>\n

#ta-quiz-app .option-button {
\n background: #1a1a2e;
\n border: 2px solid #3d3d56;
\n border-radius: 12px;
\n padding: 1.25rem 1.5rem;
\n font-size: 1.125rem;
\n text-align: left;
\n cursor: pointer;
\n transition: all 0.2s ease;
\n color: #d0d0d0;
\n font-weight: 500;
\n position: relative;
\n overflow: hidden;
\n width: 100%;
\n }<\/p>\n

#ta-quiz-app .option-button:hover:not(:disabled) {
\n border-color: #667eea;
\n background: #2a2a42;
\n transform: translateY(-2px);
\n box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
\n }<\/p>\n

#ta-quiz-app .option-button:disabled { cursor: not-allowed; }<\/p>\n

#ta-quiz-app .option-button.correct {
\n background: #0d4d3a;
\n border-color: #10b981;
\n color: #6ee7b7;
\n animation: correctPulse 0.5s ease;
\n }<\/p>\n

#ta-quiz-app .option-button.incorrect {
\n background: #4d1a1a;
\n border-color: #ef4444;
\n color: #fca5a5;
\n animation: shake 0.4s ease;
\n }<\/p>\n

@keyframes correctPulse {
\n 0%, 100% { transform: scale(1); }
\n 50% { transform: scale(1.02); }
\n }<\/p>\n

@keyframes shake {
\n 0%, 100% { transform: translateX(0); }
\n 25% { transform: translateX(-8px); }
\n 75% { transform: translateX(8px); }
\n }<\/p>\n

#ta-quiz-app .feedback-box {
\n margin-top: 1.5rem;
\n padding: 1.5rem;
\n border-radius: 12px;
\n font-size: 1rem;
\n line-height: 1.6;
\n display: none;
\n animation: slideIn 0.3s ease;
\n }<\/p>\n

@keyframes slideIn {
\n from { opacity: 0; transform: translateY(-10px); }
\n to { opacity: 1; transform: translateY(0); }
\n }<\/p>\n

#ta-quiz-app .feedback-box.show { display: block; }<\/p>\n

#ta-quiz-app .feedback-box.correct {
\n background: #0d4d3a;
\n border-left: 4px solid #10b981;
\n color: #a7f3d0;
\n }<\/p>\n

#ta-quiz-app .feedback-box.incorrect {
\n background: #4d1a1a;
\n border-left: 4px solid #ef4444;
\n color: #fca5a5;
\n }<\/p>\n

#ta-quiz-app .feedback-icon { font-size: 1.25rem; margin-right: 0.5rem; }<\/p>\n

#ta-quiz-app .explanation-image {
\n margin-top: 1rem;
\n background: rgba(255, 255, 255, 0.05);
\n border-radius: 8px;
\n padding: 1rem;
\n display: flex;
\n justify-content: center;
\n align-items: center;
\n overflow: auto;
\n }<\/p>\n

#ta-quiz-app .explanation-image svg { max-width: 100%; height: auto; }<\/p>\n

#ta-quiz-app .next-button {
\n background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
\n color: white;
\n border: none;
\n border-radius: 12px;
\n padding: 1rem 2.5rem;
\n font-size: 1.125rem;
\n font-weight: 600;
\n cursor: pointer;
\n transition: all 0.2s ease;
\n margin-top: 1.5rem;
\n box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
\n }<\/p>\n

#ta-quiz-app .next-button:hover {
\n transform: translateY(-2px);
\n box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
\n }<\/p>\n

#ta-quiz-app .next-button:disabled {
\n opacity: 0.5;
\n cursor: not-allowed;
\n transform: none;
\n }<\/p>\n

#ta-quiz-app .results-card {
\n background: #252539;
\n border-radius: 20px;
\n padding: 3rem;
\n text-align: center;
\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
\n }<\/p>\n

#ta-quiz-app .results-icon { font-size: 5rem; margin-bottom: 1rem; }<\/p>\n

#ta-quiz-app .results-card h2 {
\n font-size: 2rem;
\n color: #e0e0e0;
\n margin: 0 0 1rem 0;
\n }<\/p>\n

#ta-quiz-app .score-display {
\n font-size: 3rem;
\n font-weight: 700;
\n background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
\n -webkit-background-clip: text;
\n -webkit-text-fill-color: transparent;
\n margin: 1rem 0;
\n }<\/p>\n

#ta-quiz-app .results-message {
\n font-size: 1.125rem;
\n color: #b0b0b0;
\n margin-bottom: 2rem;
\n }<\/p>\n

#ta-quiz-app .restart-button {
\n background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
\n color: white;
\n border: none;
\n border-radius: 12px;
\n padding: 1rem 2.5rem;
\n font-size: 1.125rem;
\n font-weight: 600;
\n cursor: pointer;
\n transition: all 0.2s ease;
\n box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
\n }<\/p>\n

#ta-quiz-app .restart-button:hover {
\n transform: translateY(-2px);
\n box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
\n }<\/p>\n

@media (max-width: 640px) {
\n #ta-quiz-app .quiz-wrapper { padding: 2rem 1rem; }
\n #ta-quiz-app .quiz-header h1 { font-size: 2rem; }
\n #ta-quiz-app .question-card { padding: 1.5rem; }
\n #ta-quiz-app .question-text { font-size: 1.25rem; }
\n #ta-quiz-app .option-button { padding: 1rem; font-size: 1rem; }
\n }<\/p>\n

(function () {
\n \/\/ Prevent double-init if Brizy re-renders
\n if (window.__TA_QUIZ_INITED__) return;
\n window.__TA_QUIZ_INITED__ = true;<\/p>\n

const config = {
\n quiz_title: “Indicator-Based Trading”,
\n quiz_subtitle: “Test your knowledge of chart patterns and trading indicators”,
\n completion_message: “Great job! You’ve completed the quiz.”
\n };<\/p>\n

const quizData = [
\n {
\n question: “Do you know how trading with the trend can increase your chances of success?”,
\n icon: “\ud83d\udcc8”,
\n options: [
\n { text: “By following the dominant trend direction”, correct: true },
\n { text: “By trading randomly without analysis”, correct: false },
\n { text: “By always buying dips regardless of trend”, correct: false },
\n { text: “By ignoring market momentum”, correct: false }
\n ],
\n feedback: “Trading in the direction of the dominant trend increases your probability of success because you’re aligning with the market’s momentum rather than fighting against it.”,
\n image: `UPTREND: Trading With MomentumHigher Highs`
\n },
\n {
\n question: “Do you know how moving averages help spot trends?”,
\n icon: “\ud83d\udcca”,
\n options: [
\n { text: “They predict exact future prices with certainty”, correct: false },
\n { text: “They smooth out price data to show trend direction”, correct: true },
\n { text: “They guarantee profitable trades”, correct: false },
\n { text: “They eliminate all market risk”, correct: false }
\n ],
\n feedback: “Moving averages help identify trends by smoothing out short-term price fluctuations, making it easier to see the overall direction of the market.”,
\n image: `MA – SmoothPrice – NoisyMoving Average Smooths Price Action`
\n },
\n {
\n question: “Do you know how support and resistance levels work?”,
\n icon: “\ud83c\udfaf”,
\n options: [
\n { text: “They are random price points with no significance”, correct: false },
\n { text: “They are price levels where buying or selling pressure intensifies”, correct: true },
\n { text: “They only work on daily charts”, correct: false },
\n { text: “They never change once established”, correct: false }
\n ],
\n feedback: “Support and resistance are price levels where historical buying or selling pressure has been strong enough to halt or reverse price movement.”,
\n image: `ResistanceSupportPrice Bounces at Key Levels`
\n },
\n {
\n question: “Do you know how candlestick patterns provide trading signals?”,
\n icon: “\ud83d\udd6f\ufe0f”,
\n options: [
\n { text: “They show the open, close, high, and low prices visually”, correct: true },
\n { text: “They are purely decorative chart elements”, correct: false },
\n { text: “They work independently of market context”, correct: false },
\n { text: “They replace the need for any other analysis”, correct: false }
\n ],
\n feedback: “Candlestick patterns display price action in a visual format that reveals market sentiment, showing where buyers and sellers are most active.”,
\n image: `HighCloseOpenLowOpenCloseBullish CandleBearish Candle`
\n },
\n {
\n question: “Do you know how volume confirms price movements?”,
\n icon: “\ud83d\udcc9”,
\n options: [
\n { text: “Volume should be ignored when analyzing trends”, correct: false },
\n { text: “High volume during a move suggests strong conviction”, correct: true },
\n { text: “Volume is only useful for day trading”, correct: false },
\n { text: “Low volume always indicates a strong trend”, correct: false }
\n ],
\n feedback: “Volume confirms price movements by showing the level of participation. High volume during a trend suggests strong conviction from traders.”,
\n image: `Price UptrendRising Volume Confirms Trend StrengthVolume`
\n },
\n {
\n question: “Do you know how trend lines help identify potential reversals?”,
\n icon: “\ud83d\udcd0”,
\n options: [
\n { text: “By connecting random price points on a chart”, correct: false },
\n { text: “By drawing lines that touch significant highs or lows”, correct: true },
\n { text: “By predicting exact reversal dates”, correct: false },
\n { text: “They cannot indicate potential reversals”, correct: false }
\n ],
\n feedback: “Trend lines connect significant price points (highs in downtrends, lows in uptrends) and when broken, can signal potential trend reversals.”,
\n image: `BreakoutTrendlineTrendline Break Signals Reversal`
\n },
\n {
\n question: “Do you know how the RSI (Relative Strength Index) indicates overbought or oversold conditions?”,
\n icon: “\u26a1”,
\n options: [
\n { text: “By measuring price changes over time”, correct: true },
\n { text: “By counting the number of trades”, correct: false },
\n { text: “By tracking company fundamentals”, correct: false },
\n { text: “It cannot indicate market conditions”, correct: false }
\n ],
\n feedback: “The RSI measures the speed and magnitude of recent price changes to identify when an asset may be overbought (above 70) or oversold (below 30).”,
\n image: `Overbought (>70)Oversold (<30)703050RSI – Relative Strength Index`
\n },
\n {
\n question: “Do you know how chart patterns like head and shoulders signal trend changes?”,
\n icon: “\ud83d\udc64”,
\n options: [
\n { text: “They appear randomly without meaning”, correct: false },
\n { text: “They show shifts in supply and demand dynamics”, correct: true },
\n { text: “They guarantee exact profit targets”, correct: false },
\n { text: “They only work in bull markets”, correct: false }
\n ],
\n feedback: “Chart patterns like head and shoulders reveal shifts in market psychology and supply-demand dynamics, often preceding trend reversals.”,
\n image: `LeftShoulderHEADRightShoulderNecklineBreakdownHead & Shoulders – Bearish Reversal`
\n },
\n {
\n question: “Do you know how the golden cross pattern works?”,
\n icon: “\u2728”,
\n options: [
\n { text: “When a short-term MA crosses above a long-term MA”, correct: true },
\n { text: “When price reaches an all-time high”, correct: false },
\n { text: “When volume doubles in a single day”, correct: false },
\n { text: “When two stocks have identical price movements”, correct: false }
\n ],
\n feedback: “A golden cross occurs when a short-term moving average (like the 50-day) crosses above a long-term moving average (like the 200-day), signaling potential bullish momentum.”,
\n image: `Golden Cross50-day MA200-day MABullish Signal – Short MA Crosses Above Long MA`
\n },
\n {
\n question: “Do you know how Fibonacci retracement levels help identify support?”,
\n icon: “\ud83d\udd22”,
\n options: [
\n { text: “They are based on random number sequences”, correct: false },
\n { text: “They identify potential reversal zones based on key ratios”, correct: true },
\n { text: “They only work on cryptocurrency charts”, correct: false },
\n { text: “They predict exact future price targets”, correct: false }
\n ],
\n feedback: “Fibonacci retracement levels (23.6%, 38.2%, 50%, 61.8%) help identify potential support and resistance zones where price may reverse during a pullback.”,
\n image: `0% (High)23.6%50%61.8%Fibonacci Retracement – Support Zones`
\n },
\n {
\n question: “Do you know how a doji candlestick pattern indicates market indecision?”,
\n icon: “\ud83c\udfb4”,
\n options: [
\n { text: “When open and close prices are nearly identical”, correct: true },
\n { text: “When the candle has no wicks at all”, correct: false },
\n { text: “When volume is at its highest level”, correct: false },
\n { text: “When the closing price is higher than opening”, correct: false }
\n ],
\n feedback: “A doji forms when the opening and closing prices are virtually equal, showing that neither buyers nor sellers could gain control during that period.”,
\n image: `HighLowOpen = CloseIndecisionBalanceDOJI – Market Uncertainty`
\n },
\n {
\n question: “Do you know how breakouts confirm new trend directions?”,
\n icon: “\ud83d\ude80”,
\n options: [
\n { text: “When price moves above resistance or below support”, correct: true },
\n { text: “When trading volume decreases significantly”, correct: false },
\n { text: “When the market opens each day”, correct: false },
\n { text: “Only during major news announcements”, correct: false }
\n ],
\n feedback: “A breakout occurs when price moves decisively beyond a key support or resistance level, often signaling the start of a new trend, especially when accompanied by strong volume.”,
\n image: `ResistanceBreakout + VolumeStrong Breakout with Volume Confirmation`
\n },
\n {
\n question: “Do you know how the MACD indicator helps identify momentum changes?”,
\n icon: “\ud83d\udce1”,
\n options: [
\n { text: “By showing the relationship between two moving averages”, correct: true },
\n { text: “By measuring daily price range only”, correct: false },
\n { text: “By counting consecutive up or down days”, correct: false },
\n { text: “By tracking insider trading activity”, correct: false }
\n ],
\n feedback: “The MACD (Moving Average Convergence Divergence) shows the relationship between two exponential moving averages, helping identify changes in momentum and potential trend reversals.”,
\n image: `Bullish CrossMACD LineSignal LineMACD Indicator`
\n },
\n {
\n question: “Do you know how double tops signal potential trend reversals?”,
\n icon: “\u26f0\ufe0f”,
\n options: [
\n { text: “When price reaches the same high twice and fails to break through”, correct: true },
\n { text: “When two different stocks reach new highs”, correct: false },
\n { text: “When volume doubles at market open”, correct: false },
\n { text: “When two moving averages touch each other”, correct: false }
\n ],
\n feedback: “A double top forms when price reaches a resistance level twice but fails to break through, suggesting weakening buying pressure and a potential bearish reversal.”,
\n image: `Peak 1Peak 2NecklineBearish BreakFailed Resistance \u00d72Double Top – Bearish Reversal Pattern`
\n },
\n {
\n question: “Do you know how time frames affect technical analysis accuracy?”,
\n icon: “\u23f0”,
\n options: [
\n { text: “Longer time frames generally provide more reliable signals”, correct: true },
\n { text: “Only 1-minute charts should be used”, correct: false },
\n { text: “Time frames don’t matter in technical analysis”, correct: false },
\n { text: “Shorter time frames are always more accurate”, correct: false }
\n ],
\n feedback: “Longer time frames (daily, weekly, monthly) tend to filter out market noise and provide more reliable trend signals compared to very short time frames.”,
\n image: `1-Minute ChartHigh NoiseDaily ChartClear TrendLonger Timeframes = More Reliable Signals`
\n },
\n {
\n question: “Do you know how Bollinger Bands measure market volatility?”,
\n icon: “\ud83d\udccf”,
\n options: [
\n { text: “By plotting standard deviations around a moving average”, correct: true },
\n { text: “By calculating the number of trades per hour”, correct: false },
\n { text: “By comparing opening and closing prices”, correct: false },
\n { text: “By measuring the distance between support and resistance”, correct: false }
\n ],
\n feedback: “Bollinger Bands consist of a moving average with upper and lower bands set at standard deviations, expanding during high volatility and contracting during low volatility.”,
\n image: `High Volatility = Wide BandsUpper BandMoving AvgLower Band`
\n },
\n {
\n question: “Do you know how ascending triangles suggest bullish continuation?”,
\n icon: “\ud83d\udd3a”,
\n options: [
\n { text: “When price forms higher lows against a flat resistance”, correct: true },
\n { text: “When any three candles form an upward pattern”, correct: false },
\n { text: “When volume increases for three consecutive days”, correct: false },
\n { text: “When the chart literally looks like a triangle”, correct: false }
\n ],
\n feedback: “An ascending triangle forms when price makes higher lows while testing a horizontal resistance level, indicating increasing buying pressure and potential bullish breakout.”,
\n image: `ResistanceHigher LowsBreakout`
\n },
\n {
\n question: “Do you know how divergence between price and indicators signals reversals?”,
\n icon: “\ud83d\udd04”,
\n options: [
\n { text: “When price makes new highs but indicator doesn’t confirm”, correct: true },
\n { text: “When two different stocks move in opposite directions”, correct: false },
\n { text: “When the market opens higher than it closed”, correct: false },
\n { text: “When trading volume is inconsistent”, correct: false }
\n ],
\n feedback: “Divergence occurs when price makes a new high or low but the indicator (like RSI or MACD) doesn’t confirm it, suggesting weakening momentum and potential reversal.”,
\n image: `Price: Higher HighsRSI: Lower HighsDivergence`
\n },
\n {
\n question: “Do you know how consolidation patterns indicate potential breakouts?”,
\n icon: “\ud83d\udce6”,
\n options: [
\n { text: “When price moves sideways in a tight range before breaking out”, correct: true },
\n { text: “When the market is closed for holidays”, correct: false },
\n { text: “When multiple stocks merge into one company”, correct: false },
\n { text: “When price only moves downward”, correct: false }
\n ],
\n feedback: “Consolidation is a period where price trades within a narrow range, building energy that often leads to a significant breakout in either direction once the pattern completes.”,
\n image: `Consolidation ZoneBreakout`
\n },
\n {
\n question: “Do you know how the risk-reward ratio helps in trade planning?”,
\n icon: “\u2696\ufe0f”,
\n options: [
\n { text: “By comparing potential profit to potential loss before entering”, correct: true },
\n { text: “By calculating how many trades to place daily”, correct: false },
\n { text: “By determining which broker to use”, correct: false },
\n { text: “By predicting market direction with certainty”, correct: false }
\n ],
\n feedback: “The risk-reward ratio compares your potential profit to potential loss on a trade. A favorable ratio (e.g., 3:1) means you’re risking $1 to potentially make $3, improving long-term profitability.”,
\n image: `Reward $3Risk $1Entry3:1 Ratio`
\n }
\n ];<\/p>\n

const root = document.getElementById(‘ta-quiz-app’);
\n if (!root) return;<\/p>\n

root.innerHTML = `<\/p>\n

\n
\n
\n

<\/h1>\n

\n<\/header>\n

\n
<\/div>\n<\/p><\/div>\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n

`;<\/p>\n

const titleEl = root.querySelector(‘#quiz-title’);
\n const subtitleEl = root.querySelector(‘#quiz-subtitle’);
\n const progressBar = root.querySelector(‘#progress-bar’);
\n const content = root.querySelector(‘#quiz-content’);<\/p>\n

titleEl.textContent = config.quiz_title;
\n subtitleEl.textContent = config.quiz_subtitle;<\/p>\n

let currentQuestion = 0;
\n let score = 0;
\n let answered = false;<\/p>\n

function updateProgress() {
\n const progress = (currentQuestion \/ quizData.length) * 100;
\n progressBar.style.width = progress + ‘%’;
\n }<\/p>\n

function renderQuestion() {
\n const q = quizData[currentQuestion];<\/p>\n

content.innerHTML = `<\/p>\n

\n
Question ${currentQuestion + 1} of ${quizData.length}<\/div>\n

\n ${q.icon}<\/span>
\n ${q.question}
\n <\/h2>\n
\n ${q.options.map((opt, idx) => `
\n