The international break may be a necessity (especially during a World Cup year), but it remains an annoying one. With no matches to dissect and discuss, the news tends to run dry this time of year. However,
there is one thing football fans can digest any time of year: transfer rumors.
While Gian Piero Gasperini has constructed the best defense in the league, using the combined talents of goalkeeper Mile Svilar and defenders Gianluca Mancini, Evan Ndicka, Mario Hermoso, and Zeki Celik to strangle opposing offenses, Roma’s attack has sputtered early in the season. However, there is a bright side to Roma’s attacking issues: they’re sure to generate plenty of juicy transfer rumors over the next two months.
But before we dream of Joshua Zirkzee donning the giallo e rosso, let’s test your knowledge on how Roma’s current players found their way to the capital. (I’m still working out the kinks on this, but can’t seem to get it to function on Firefox browsers—thank you for your patience)
Passport to Roma: The Transfer Trail Challenge /* Define custom colors from Chiesa di Totti logo */ :root { --chiesa-red: #8B0000; /* Darker Red/Maroon from logo */ --chiesa-gold: #FFD700; /* Gold/Yellow from logo */ --chiesa-dark: #2C2C2C; /* Dark text/accents from logo */ --chiesa-light-red: #D2B4B4; /* Lighter, thematic red for accents */ } /* Base styling for the document body */ body { margin: 0; padding: 0; /* Background remains light blush */ background-color: #f7f3f3; font-family: 'Lato', Helvetica, Arial, sans-serif; color: var(--chiesa-dark); } /* Quiz Container Styles */ #transfer-quiz { max-width: 900px; margin: 20px auto; padding: 24px; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.05), 0 4px 8px rgba(0,0,0,0.05); min-height: 400px; display: flex; flex-direction: column; } /* Header Styles */ .quiz-header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; /* --- UPDATED: Header border to theme red --- */ border-bottom: 3px solid var(--chiesa-red); padding-bottom: 15px; } /* Chiesa di Totti Logo in Header */ .quiz-header .chiesa-logo { height: 40px; width: auto; } .quiz-header h2 { color: var(--chiesa-red); margin: 0; font-size: 1.6rem; font-weight: 800; font-family: 'Inter', Helvetica, Arial, sans-serif; } /* Question and Path Styles */ #quiz-instruction { font-weight: 800; font-size: 1.25rem; color: var(--chiesa-dark); text-align: center; margin-bottom: 15px; padding: 10px 0; text-shadow: 0 0 1px rgba(0,0,0,0.05); } /* Visual Path Element - Transfer Path Container */ #transfer-path { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px; margin: 15px 0 25px 0; min-height: 90px; padding: 15px; background: #fcfcfc; /* --- UPDATED: Border to themed light red --- */ border: 2px solid var(--chiesa-light-red); border-radius: 12px; box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.05); overflow-x: auto; white-space: nowrap; } /* Logo Containers */ .path-club { min-width: 75px; height: 75px; border-radius: 50%; border: 3px solid #ccc; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: all 0.3s ease; flex-shrink: 0; background-color: #ffffff; } .path-club img { width: 100%; height: 100%; object-fit: contain; display: block; } /* Style for the Final Destination Logo (Roma) */ .path-club.destination { border-color: var(--chiesa-red); border-width: 5px; } .path-arrow { font-size: 2.25rem; color: var(--chiesa-red); font-weight: 900; margin: 0 8px; flex-shrink: 0; } /* Option Button Container */ .quiz-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 20px; } /* --- PLAYER OPTION BUTTON STYLES WITH THEMED BORDER --- */ .quiz-options .player-option-button { display: flex; align-items: center; justify-content: center; padding: 12px 10px; /* Default border is now thematic light red */ border: 2px solid var(--chiesa-light-red); border-radius: 10px; cursor: pointer; transition: all 0.2s; text-align: center; text-decoration: none; color: var(--chiesa-dark); font-size: 0.95rem; font-weight: 700; letter-spacing: 0; background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(250,250,250,1) 100%); box-shadow: 0 5px 15px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.03); } .quiz-options .player-option-button:hover { /* Hover border is now bright gold */ border-color: var(--chiesa-gold); /* Hover background is light gold gradient */ background: linear-gradient(180deg, #fffaf5 0%, #fff4e0 100%); transform: translateY(-3px) scale(1.01); box-shadow: 0 10px 20px rgba(0,0,0,0.15), 0 5px 10px rgba(0,0,0,0.1); } /* Next Button Styles - using red from theme */ #quiz-next { margin-top: 30px; padding: 12px 18px; border-radius: 10px; border: none; background: var(--chiesa-red); color: #fff; cursor: pointer; font-weight: 700; text-align: center; text-decoration: none; display: inline-block; box-shadow: 0 4px #7c0000; transition: background-color 0.1s; } #quiz-next:active { box-shadow: 0 1px #7c0000; transform: translateY(3px); } /* Result Text Style */ #quiz-result { margin-top: 20px; padding: 15px; border-radius: 10px; font-weight: 700; } .correct-result { color: #38761d; background-color: #f0fdf4; border: 2px solid #38761d; } .incorrect-result { color: #b91c1c; background-color: #fee2e2; border: 2px solid #b91c1c; } /* Mobile adjustments */ @media (max-width: 600px) { #transfer-quiz { margin: 10px; padding: 15px; } .quiz-options { grid-template-columns: 1fr; gap: 8px; } #transfer-path { flex-wrap: nowrap; justify-content: flex-start; min-height: 70px; } .path-club { min-width: 55px; height: 55px; } .path-arrow { font-size: 1.8rem; margin: 0 5px; } #quiz-instruction { font-size: 1.1rem; } }
Identify which **current AS Roma player** followed this exact sequential transfer path to join the Giallorossi:
Select the Player:
Next Player
// Updated to the user-specified, higher-resolution AS Roma logo URL (263px) const ROMA_LOGO_PATH = "https://upload.wikimedia.org/wikipedia/en/thumb/f/f7/AS_Roma_logo_%282017%29.svg/263px-AS_Roma_logo_%282017%29.svg.png"; // Helper function to convert text to Title Case function toTitleCase(str) { if (!str) return ''; return str.toLowerCase().split(' ').map(word => { return (word.charAt(0).toUpperCase() + word.slice(1)); }).join(' '); } // ====================================================================== // TRANSFER TRAIL CHALLENGE QUESTIONS (Now includes 'c' for Clue) // ====================================================================== const quizData = [ // 1. LORENZO PELLEGRINI { "p": "Lorenzo Pellegrini", "c": "Midfielder, former captain who lifted the inaugural UEFA Europa Conference League trophy.", "t": [ {"c":"Roma Youth", "u":ROMA_LOGO_PATH}, {"c":"Sassuolo", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/1/1c/US_Sassuolo_Calcio_logo.svg/70px-US_Sassuolo_Calcio_logo.svg.png"}, {"c":"AS Roma", "u":ROMA_LOGO_PATH} ] }, // 2. PAULO DYBALA { "p": "Paulo Dybala", "c": "Forward, joined on a free transfer from a rival club, earning the iconic number 21 shirt.", "t": [ {"c":"Instituto", "u":"https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Instituto_acc_cordoba_logo.svg/70px-Instituto_acc_cordoba_logo.svg.png"}, {"c":"Palermo", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/d/df/Palermo_Calcio_logo_%282019%29.svg/70px-Palermo_Calcio_logo_%282019%29_logo.svg.png"}, {"c":"Juventus", "u":"https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Juventus_FC_-_logo_black_%28Italy%2C_2020%29.svg/70px-Juventus_FC_-_logo_black_%28Italy%2C_2020%29.svg.png"}, {"c":"AS Roma", "u":ROMA_LOGO_PATH} ] }, // 3. EVAN NDICKA { "p": "Evan Ndicka", "c": "Centre-Back, a free transfer arrival from the Bundesliga known for his physicality and left foot.", "t": [ {"c":"AJ Auxerre", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/5/51/AJAuxerreLogo.svg/70px-AJAuxerreLogo.svg.png"}, {"c":"Eintracht Frankfurt", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/7/7e/Eintracht_Frankfurt_crest.svg/70px-Eintracht_Frankfurt_crest.svg.png"}, {"c":"AS Roma", "u":ROMA_LOGO_PATH} ] }, // 4. BRYAN CRISTANTE { "p": "Bryan Cristante", "c": "Midfielder, signed permanently for approximately €30M after a successful loan spell from Atalanta.", "t": [ {"c":"AC Milan", "u":"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/Logo_of_AC_Milan.svg/70px-Logo_of_AC_Milan.svg.png"}, {"c":"Benfica", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/a/a2/SL_Benfica_logo.svg/70px-SL_Benfica_logo.svg.png"}, {"c":"Palermo", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/d/df/Palermo_Calcio_logo_%282019%29.svg/70px-Palermo_Calcio_logo_%282019%29_logo.svg.png"}, {"c":"Pescara", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/0/06/Delfino_Pescara_logo.svg/70px-Delfino_Pescara_logo.svg.png"}, {"c":"Atalanta", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/6/66/AtalantaBC.svg/70px-AtalantaBC.svg.png"}, {"c":"AS Roma", "u":ROMA_LOGO_PATH} ] }, // 5. ARTEM DOVBYK { "p": "Artem Dovbyk", "c": "Forward, arrived after leading La Liga in scoring.", "t": [ {"c":"Cherkashchyna", "u":"https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/FC_Cherkashchyna_logo.png/70px-FC_Cherkashchyna_logo.png"}, {"c":"Dnipro", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/0/01/FC_Dnipro_Dnipropetrovsk.svg/70px-FC_Dnipro_Dnipropetrovsk.svg.png"}, {"c":"Midtjylland", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/d/dd/FC_Midtjylland_logo.svg/70px-FC_Midtjylland_logo.svg.png"}, {"c":"Dnipro-1", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/2/2c/SC_Dnipro-1_%28Ukraine%29_white_background_CMYK.svg/70px-SC_Dnipro-1_%28Ukraine%29_white_background_CMYK.svg.png"}, {"c":"Girona", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/f/f7/Girona_FC_Logo.svg/70px-Girona_FC_Logo.svg.png"}, {"c":"AS Roma", "u":ROMA_LOGO_PATH} ] }, // 6. GIANLUCA MANCINI { "p": "Gianluca Mancini", "c": "Centre-Back, known for his passion and for scoring the decisive goal in a Derby della Capitale.", "t": [ {"c":"Perugia", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/0/08/Ac_Perugia_logo.svg/70px-Ac_Perugia_logo.svg.png"}, {"c":"Atalanta", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/6/66/AtalantaBC.svg/70px-AtalantaBC.svg.png"}, {"c":"AS Roma", "u":ROMA_LOGO_PATH} ] }, // 7. STEPHAN EL SHAARAWY { "p": "Stephan El Shaarawy", "c": "Winger, famously nicknamed 'Il Faraone' (The Pharaoh) and is in his second spell with the club.", "t": [ {"c":"Genoa", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/2/2c/Genoa_CFC_crest.svg/70px-Genoa_CFC_crest.svg.png"}, {"c":"Padova", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/8/85/Calcio_Padova_crest.svg/70px-Calcio_Padova_crest.svg.png"}, {"c":"AC Milan", "u":"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/Logo_of_AC_Milan.svg/70px-Logo_of_AC_Milan.svg.png"}, {"c":"Monaco", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/c/cf/LogoASMonacoFC2021.svg/70px-LogoASMonacoFC2021.svg.png"}, {"c":"Shanghai Shenhua", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/d/d3/Shanghai_Shenhua_F.C.svg/70px-Shanghai_Shenhua_F.C.svg.png"}, {"c":"AS Roma", "u":ROMA_LOGO_PATH} ] }, // 8. ZEKI ÇELIK { "p": "Zeki Çelik", "c": "Right-Back, an integral part of the Lille side that won the Ligue 1 title in 2021.", "t": [ {"c":"Bursaspor", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/3/3c/Bursaspor_logo.svg/70px-Bursaspor_logo.svg.png"}, {"c":"Istanbulspor", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/6/69/Istanbulspor.svg/70px-Istanbulspor.svg.png"}, {"c":"Lille OSC", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/3/3f/Lille_OSC_2018_logo.svg/70px-Lille_OSC_2018_logo.svg.png"}, {"c":"AS Roma", "u":ROMA_LOGO_PATH} ] }, // 9. TOMMASO BALDANZI { "p": "Tommaso Baldanzi", "c": "Attacking Midfielder, known for his dribbling ability, he signed from Empoli in the 2024 winter window.", "t": [ {"c":"Empoli", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/f/fb/Empoli_FC_crest.svg/70px-Empoli_FC_crest.svg.png"}, {"c":"AS Roma", "u":ROMA_LOGO_PATH} ] }, // 10. ANGELIÑO (MOST COMPLEX PATH) { "p": "Angeliño", "c": "Left-Back, has been loaned out from Manchester City's books to six different clubs across Europe and the MLS.", "t": [ {"c":"Man City", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/e/eb/Manchester_City_FC_badge.svg/70px-Manchester_City_FC_badge.svg.png"}, {"c":"NYCFC", "u":"https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Logo_New_York_City_FC_2025.svg/70px-Logo_New_York_City_FC_2025.svg.png"}, // Correct Mallorca logo URL {"c":"Mallorca", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/e/e0/Rcd_mallorca.svg/70px-Rcd_mallorca.svg.png"}, {"c":"NAC Breda", "u":"https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Logo_NAC_Breda.svg/70px-Logo_NAC_Breda.svg.png"}, {"c":"PSV", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/0/05/PSV_Eindhoven.svg/70px-PSV_Eindhoven.svg.png"}, {"c":"Man City", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/e/eb/Manchester_City_FC_badge.svg/70px-Manchester_City_FC_badge.svg.png"}, {"c":"RB Leipzig", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/0/04/RB_Leipzig_2014_logo.svg/70px-RB_Leipzig_2014_logo.svg.png"}, {"c":"Hoffenheim", "u":"https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Logo_TSG_Hoffenheim.svg/70px-Logo_TSG_Hoffenheim.svg.png"}, {"c":"Galatasaray", "u":"https://upload.wikimedia.org/wikipedia/en/thumb/4/49/Galatasaray_SK_football_logo.png/70px-Galatasaray_SK_football_logo.png"}, {"c":"AS Roma", "u":ROMA_LOGO_PATH} ] } ]; // ====================================================================== // END OF QUESTIONS // ====================================================================== let currentQuestionIndex = 0; let score = 0; let isAnswered = false; function shuffleArray(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } // Helper to get 3 random players *not* matching the correct player function getDecoyOptions(correctPlayerName, allPlayers) { const decoys = allPlayers.filter(p => p.p !== correctPlayerName); shuffleArray(decoys); return decoys.slice(0, 3); } function selectOption(selectedPlayerName, correctPlayerName) { if (isAnswered) return; isAnswered = true; const opts = document.getElementById("quiz-options"); const nextBtn = document.getElementById("quiz-next"); const resultDiv = document.getElementById("quiz-result"); // Get all buttons and disable Array.from(opts.children).forEach((el) => { el.style.pointerEvents = 'none'; // Remove hover effects, reset shadow el.classList.remove('hover:border-[var(--chiesa-gold)]', 'hover:bg-[#fffdf5]', 'hover:translate-y-[-2px]'); el.style.boxShadow = '0 2px 4px rgba(0,0,0,0.05)'; }); const isCorrect = selectedPlayerName === correctPlayerName; let selectedElement; let correctElement; // Find the selected and correct elements in the DOM Array.from(opts.children).forEach(el => { const playerName = el.getAttribute('data-player-name'); if (playerName === selectedPlayerName) { selectedElement = el; } if (playerName === correctPlayerName) { correctElement = el; } }); if (isCorrect) { score++; // Correct: Highlight selected option green selectedElement.style.background = "#e5ffe5"; selectedElement.style.borderColor = "#38761d"; resultDiv.textContent = `Correct! The player is ${toTitleCase(correctPlayerName)}.`; resultDiv.className = "correct-result"; } else { // Incorrect: Highlight selected option red selectedElement.style.background = "#fee2e2"; selectedElement.style.borderColor = "#b91c1c"; // Highlight the correct answer option in green if (correctElement) { correctElement.style.background = "#f0fdf4"; correctElement.style.borderColor = "#38761d"; } resultDiv.textContent = `Incorrect! The player who followed this path is ${toTitleCase(correctPlayerName)}.`; resultDiv.className = "incorrect-result"; } resultDiv.style.display = "block"; nextBtn.style.display = "inline-block"; } function nextQuestion(event) { event.preventDefault(); isAnswered = false; currentQuestionIndex++; if (currentQuestionIndex { const clubDiv = document.createElement("div"); clubDiv.className = "path-club"; // Add a visual cue to the final destination (Roma) if (index === pathToShow.length - 1) { // Check if it's the last club AND it is Roma (either senior or youth) if (club.c === "AS Roma" || club.c === "Roma Youth") { clubDiv.classList.add("destination"); } } clubDiv.title = club.c; const fallbackText = club.c.split(' ').map(n => n[0]).join('').toUpperCase().substring(0, 3); // The onerror logic here uses a 75x75 placeholder in case the external logo fails to load. clubDiv.innerHTML = `
`; pathContainer.appendChild(clubDiv); if (index { const link = document.createElement("a"); link.href = "#"; link.className = "player-option-button"; link.title = opt.p; link.setAttribute('data-player-name', opt.p); // Use Title Case for display link.innerHTML = `
${toTitleCase(opt.p)}`; link.addEventListener('click', (e) => { e.preventDefault(); selectOption(opt.p, correctPlayer.p); }); opts.appendChild(link); }); } function showResult() { const q = document.getElementById("quiz-instruction"); const opts = document.getElementById("quiz-options"); const nextBtn = document.getElementById("quiz-next"); const resultDiv = document.getElementById("quiz-result"); const pathContainer = document.getElementById('transfer-path'); q.textContent = "Challenge Complete! The transfer window is closed (for now)."; pathContainer.innerHTML = ""; opts.innerHTML = ""; nextBtn.style.display = "none"; const total = quizData.length; const pct = Math.round((score / total) * 100); let msg = ""; if (pct === 100) msg = "🏆 PERFECT SCORE! You traced every single transfer trail flawlessly. Unrivaled knowledge!"; else if (pct >= 80) msg = "👏 Excellent Navigator! You know your Giallorossi passports extremely well."; else if (pct >= 50) msg = "🤔 Solid Effort! You recognized most of the players from their journeys."; else msg = "💭 Time for a refresh! The transfer market is complicated, but you'll get there."; resultDiv.textContent = `Final Score: ${score}/${total} (${pct}%). ${msg}`; resultDiv.className = "correct-result"; resultDiv.style.display = "block"; } function initQuiz() { const nextBtn = document.getElementById('quiz-next'); if (!nextBtn) { console.error("Quiz Initialization failed: Required DOM elements not found."); return; } nextBtn.addEventListener('click', nextQuestion); shuffleArray(quizData); showQuestion(); } window.addEventListener('load', initQuiz);
