feat: se aplican varios fix a las pruebas

web/experience/src/components/blocks/HotspotPlayer.tsx

@@ -3,6 +3,7 @@
 import React, { useState, useRef } from "react";
 import Image from "next/image";
 import { Search, CheckCircle, XCircle, MousePointer2 } from "lucide-react";
+import { getImageUrl } from "@/lib/api";
 
 interface Hotspot {
     id: string;
@@ -90,7 +91,7 @@ export default function HotspotPlayer({
                 className="relative aspect-video rounded-3xl overflow-hidden border-4 border-white/10 bg-black cursor-crosshair group select-none shadow-2xl"
             >
                 <Image
-                    src={imageUrl}
+                    src={getImageUrl(imageUrl)}
                     alt={title}
                     fill
                     className="object-cover transition-transform duration-700 group-hover:scale-[1.02]"

web/experience/src/components/blocks/MemoryPlayer.tsx

@@ -13,7 +13,7 @@ interface MemoryCard {
 
 interface MemoryPlayerProps {
     title: string;
-    pairs: { id: string, content: string }[];
+    pairs: { left: string, right: string, id?: string }[];
     onComplete: (score: number) => void;
 }
 
@@ -30,9 +30,10 @@ export default function MemoryPlayer({
     const initializeGame = useCallback(() => {
         const gameCards: MemoryCard[] = [];
         initialPairs.forEach((pair, idx) => {
-            // Add two of each
-            gameCards.push({ id: idx * 2, content: pair.content, pairId: pair.id, isFlipped: false, isMatched: false });
-            gameCards.push({ id: idx * 2 + 1, content: pair.content, pairId: pair.id, isFlipped: false, isMatched: false });
+            const pairId = pair.id || idx.toString();
+            // Add two of each (Left and Right)
+            gameCards.push({ id: idx * 2, content: pair.left, pairId: pairId, isFlipped: false, isMatched: false });
+            gameCards.push({ id: idx * 2 + 1, content: pair.right, pairId: pairId, isFlipped: false, isMatched: false });
         });
 
         // Shuffle