Exercici Interactiu: Models d’IA<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n .drag-over {\n background-color: #f0fdf4;\n border: 2px dashed #22c55e;\n }\n .drop-zone {\n min-height: 80px;\n transition: all 0.3s ease;\n }\n .draggable {\n cursor: grab;\n transition: transform 0.2s ease;\n }\n .draggable:active {\n cursor: grabbing;\n }\n .correct {\n background-color: #dcfce7 !important;\n border-color: #22c55e !important;\n color: #166534;\n }\n .wrong {\n background-color: #fee2e2 !important;\n border-color: #ef4444 !important;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 min-h-screen p-4 md:p-8 font-sans\">\n\n <div class=\"max-w-6xl mx-auto\">\n <header class=\"text-center mb-8\">\n <h1 class=\"text-3xl font-bold text-gray-800 mb-2\">Posa a prova els teus coneixements sobre IA<\/h1>\n <p class=\"text-gray-600\">Arrossega cada nom de l’eina a la fila que descrigui millor les seves fortaleses i febleses.<\/p>\n <\/header>\n\n \n <div id=\"options-container\" class=\"bg-white p-6 rounded-xl shadow-md mb-8 border border-gray-200\">\n <h2 class=\"text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4 text-center\">Eines per classificar<\/h2>\n <div id=\"draggables\" class=\"flex flex-wrap justify-center gap-4\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"overflow-x-auto bg-white rounded-xl shadow-lg border border-gray-200\">\n <table class=\"w-full text-left border-collapse\">\n <thead>\n <tr class=\"bg-gray-100 text-gray-700\">\n <th class=\"p-4 border-b w-48\">Eina<\/th>\n <th class=\"p-4 border-b\">Fortalesa Principal<\/th>\n <th class=\"p-4 border-b\">Ideal per a…<\/th>\n <th class=\"p-4 border-b text-sm\">Punts febles<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"table-body\">\n \n <\/tbody>\n <\/table>\n <\/div>\n\n <div id=\"feedback\" class=\"mt-8 text-center hidden\">\n <div class=\"inline-flex items-center gap-3 px-6 py-3 bg-green-100 text-green-800 rounded-full font-bold shadow-sm animate-bounce\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" \/>\n <\/svg>\n <span>Molt b\u00e9! Has completat la taula correctament.<\/span>\n <\/div>\n <\/div>\n \n <div class=\"text-center mt-6\">\n <button onclick=\"resetGame()\" class=\"text-sm text-blue-600 hover:underline\">Reiniciar exercici<\/button>\n <\/div>\n <\/div>\n\n <script>\n const data = [\n {\n id: \"perplexity\",\n name: \"Perplexity\",\n strength: \"Investigaci\u00f3 rigorosa. Combina diversos models per verificar dades en temps real i eliminar al\u00b7lucinacions.\",\n ideal: \"Recerca acad\u00e8mica, jur\u00eddica i estrat\u00e8gica on la citaci\u00f3 de fonts no \u00e9s negociable.\",\n weakness: \"Menys apte per a l'escriptura creativa pura o la narrativa de ficci\u00f3 extensa.\"\n },\n {\n id: \"claude\",\n name: \"Claude\",\n strength: \"Raonament i codificaci\u00f3 complexos. El model m\u00e9s 'intel\u00b7ligent' per seguir instruccions llargues i codi sense errors.\",\n ideal: \"Programaci\u00f3, an\u00e0lisi de documents jur\u00eddics extensos i escriptura matisada\/humana.\",\n weakness: \"Pot ser excessivament formal ('rebuig' per seguretat) i m\u00e9s lent en respostes curtes.\"\n },\n {\n id: \"chatgpt-gemini\",\n name: \"ChatGPT \/ Gemini\",\n strength: \"Versatilitat Total i Ecosistema Google. Excel\u00b7lent mem\u00f2ria, agents aut\u00f2noms i integraci\u00f3 nativa amb Workspace.\",\n ideal: \"\u00das general, m\u00e0rqueting, big data i video analytics.\",\n weakness: \"Alt cost en \u00fas intensiu, menys creativitat liter\u00e0ria que Claude i depend\u00e8ncia de Google.\"\n },\n {\n id: \"deepseek\",\n name: \"DeepSeek\",\n strength: \"Efici\u00e8ncia T\u00e8cnica (Cost\/Rendiment). Nivell superior en matem\u00e0tiques i codi a una fracci\u00f3 del cost d'USA.\",\n ideal: \"Desenvolupadors, enginyers i tasques t\u00e8cniques que requereixen baix cost per token.\",\n weakness: \"M\u00e9s limitat en suport global i reducci\u00f3 de capacitat en matisos culturals occidentals.\"\n },\n {\n id: \"grok\",\n name: \"Grok\",\n strength: \"Temps real i tend\u00e8ncies. Acc\u00e9s directe al flux de dades de X (Twitter). Visi\u00f3 'sense censura'.\",\n ideal: \"Periodistes, an\u00e0lisi de tend\u00e8ncies socials, gesti\u00f3 de crisis i marques personals.\",\n weakness: \"Menys profunditat en el raonament l\u00f2gic-estructural complex comparat amb els l\u00edders.\"\n }\n ];\n\n function initGame() {\n const draggablesContainer = document.getElementById('draggables');\n const tableBody = document.getElementById('table-body');\n const feedback = document.getElementById('feedback');\n \n \/\/ Barrejar noms per les opcions\n const shuffledNames = [...data].sort(() => Math.random() - 0.5);\n \n \/\/ Crear botons arrossegables\n shuffledNames.forEach(item => {\n const div = document.createElement('div');\n div.className = 'draggable bg-blue-600 text-white px-5 py-2 rounded-lg shadow hover:bg-blue-700 font-medium select-none';\n div.draggable = true;\n div.innerText = item.name;\n div.id = `drag-${item.id}`;\n div.dataset.target = item.id;\n \n div.addEventListener('dragstart', (e) => {\n e.dataTransfer.setData('text\/plain', item.id);\n e.target.style.opacity = '0.5';\n });\n\n div.addEventListener('dragend', (e) => {\n e.target.style.opacity = '1';\n });\n\n draggablesContainer.appendChild(div);\n });\n\n \/\/ Crear files de la taula\n data.forEach(item => {\n const tr = document.createElement('tr');\n tr.className = 'hover:bg-gray-50 transition-colors';\n tr.innerHTML = `\n <td class=\"p-4 border-b\">\n <div class=\"drop-zone border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center p-2 text-gray-400 text-xs text-center\" \n data-id=\"${item.id}\">\n Deixa anar aqu\u00ed\n <\/div>\n <\/td>\n <td class=\"p-4 border-b text-sm text-gray-700\">${item.strength}<\/td>\n <td class=\"p-4 border-b text-sm text-gray-700\">${item.ideal}<\/td>\n <td class=\"p-4 border-b text-sm text-gray-500 italic\">${item.weakness}<\/td>\n `;\n tableBody.appendChild(tr);\n });\n\n \/\/ L\u00f2gica de Drop\n document.querySelectorAll('.drop-zone').forEach(zone => {\n zone.addEventListener('dragover', (e) => {\n e.preventDefault();\n if (!zone.classList.contains('correct')) {\n zone.classList.add('drag-over');\n }\n });\n\n zone.addEventListener('dragleave', () => {\n zone.classList.remove('drag-over');\n });\n\n zone.addEventListener('drop', (e) => {\n e.preventDefault();\n zone.classList.remove('drag-over');\n const droppedId = e.dataTransfer.getData('text\/plain');\n const targetId = zone.dataset.id;\n\n if (droppedId === targetId) {\n const originalElement = document.getElementById(`drag-${droppedId}`);\n zone.innerText = originalElement.innerText;\n zone.classList.add('correct');\n zone.classList.remove('text-gray-400', 'text-xs');\n zone.classList.add('font-bold', 'text-base');\n originalElement.remove();\n checkWin();\n } else {\n \/\/ Resposta incorrecta temporal\n zone.classList.add('wrong');\n setTimeout(() => zone.classList.remove('wrong'), 500);\n }\n });\n });\n }\n\n function checkWin() {\n const corrects = document.querySelectorAll('.correct').length;\n if (corrects === data.length) {\n document.getElementById('feedback').classList.remove('hidden');\n }\n }\n\n function resetGame() {\n document.getElementById('draggables').innerHTML = '';\n document.getElementById('table-body').innerHTML = '';\n document.getElementById('feedback').classList.add('hidden');\n initGame();\n }\n\n window.onload = initGame;\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p> Exercici Interactiu: Models d’IA<\/p>\n<p> .drag-over {<br \/>\n background-color:… <a href=\"https:\/\/serveiseducatius.xtec.cat\/segria\/general\/prova-canvas-gemini\/\" title=\"Read prova CANVAS Gemini\">Llegeix m\u00e9s\u00bb<\/a><\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-27212","post","type-post","status-publish","format-standard","hentry","category-general"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/serveiseducatius.xtec.cat\/segria\/wp-json\/wp\/v2\/posts\/27212","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/serveiseducatius.xtec.cat\/segria\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/serveiseducatius.xtec.cat\/segria\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/serveiseducatius.xtec.cat\/segria\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/serveiseducatius.xtec.cat\/segria\/wp-json\/wp\/v2\/comments?post=27212"}],"version-history":[{"count":6,"href":"https:\/\/serveiseducatius.xtec.cat\/segria\/wp-json\/wp\/v2\/posts\/27212\/revisions"}],"predecessor-version":[{"id":27311,"href":"https:\/\/serveiseducatius.xtec.cat\/segria\/wp-json\/wp\/v2\/posts\/27212\/revisions\/27311"}],"wp:attachment":[{"href":"https:\/\/serveiseducatius.xtec.cat\/segria\/wp-json\/wp\/v2\/media?parent=27212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/serveiseducatius.xtec.cat\/segria\/wp-json\/wp\/v2\/categories?post=27212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/serveiseducatius.xtec.cat\/segria\/wp-json\/wp\/v2\/tags?post=27212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":27212,"date":"2026-03-06T13:50:25","date_gmt":"2026-03-06T12:50:25","guid":{"rendered":"https:\/\/serveiseducatius.xtec.cat\/segria\/?p=27212"},"modified":"2026-03-06T13:50:25","modified_gmt":"2026-03-06T12:50:25","slug":"prova-canvas-gemini","status":"publish","type":"post","link":"https:\/\/serveiseducatius.xtec.cat\/segria\/general\/prova-canvas-gemini\/","title":{"rendered":"prova CANVAS Gemini"},"content":{"rendered":"\n\n\n\n \n \n Exercici Interactiu: Models d’IA<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n .drag-over {\n background-color: #f0fdf4;\n border: 2px dashed #22c55e;\n }\n .drop-zone {\n min-height: 80px;\n transition: all 0.3s ease;\n }\n .draggable {\n cursor: grab;\n transition: transform 0.2s ease;\n }\n .draggable:active {\n cursor: grabbing;\n }\n .correct {\n background-color: #dcfce7 !important;\n border-color: #22c55e !important;\n color: #166534;\n }\n .wrong {\n background-color: #fee2e2 !important;\n border-color: #ef4444 !important;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 min-h-screen p-4 md:p-8 font-sans\">\n\n <div class=\"max-w-6xl mx-auto\">\n <header class=\"text-center mb-8\">\n <h1 class=\"text-3xl font-bold text-gray-800 mb-2\">Posa a prova els teus coneixements sobre IA<\/h1>\n <p class=\"text-gray-600\">Arrossega cada nom de l’eina a la fila que descrigui millor les seves fortaleses i febleses.<\/p>\n <\/header>\n\n \n <div id=\"options-container\" class=\"bg-white p-6 rounded-xl shadow-md mb-8 border border-gray-200\">\n <h2 class=\"text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4 text-center\">Eines per classificar<\/h2>\n <div id=\"draggables\" class=\"flex flex-wrap justify-center gap-4\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"overflow-x-auto bg-white rounded-xl shadow-lg border border-gray-200\">\n <table class=\"w-full text-left border-collapse\">\n <thead>\n <tr class=\"bg-gray-100 text-gray-700\">\n <th class=\"p-4 border-b w-48\">Eina<\/th>\n <th class=\"p-4 border-b\">Fortalesa Principal<\/th>\n <th class=\"p-4 border-b\">Ideal per a…<\/th>\n <th class=\"p-4 border-b text-sm\">Punts febles<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"table-body\">\n \n <\/tbody>\n <\/table>\n <\/div>\n\n <div id=\"feedback\" class=\"mt-8 text-center hidden\">\n <div class=\"inline-flex items-center gap-3 px-6 py-3 bg-green-100 text-green-800 rounded-full font-bold shadow-sm animate-bounce\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" \/>\n <\/svg>\n <span>Molt b\u00e9! Has completat la taula correctament.<\/span>\n <\/div>\n <\/div>\n \n <div class=\"text-center mt-6\">\n <button onclick=\"resetGame()\" class=\"text-sm text-blue-600 hover:underline\">Reiniciar exercici<\/button>\n <\/div>\n <\/div>\n\n <script>\n const data = [\n {\n id: \"perplexity\",\n name: \"Perplexity\",\n strength: \"Investigaci\u00f3 rigorosa. Combina diversos models per verificar dades en temps real i eliminar al\u00b7lucinacions.\",\n ideal: \"Recerca acad\u00e8mica, jur\u00eddica i estrat\u00e8gica on la citaci\u00f3 de fonts no \u00e9s negociable.\",\n weakness: \"Menys apte per a l'escriptura creativa pura o la narrativa de ficci\u00f3 extensa.\"\n },\n {\n id: \"claude\",\n name: \"Claude\",\n strength: \"Raonament i codificaci\u00f3 complexos. El model m\u00e9s 'intel\u00b7ligent' per seguir instruccions llargues i codi sense errors.\",\n ideal: \"Programaci\u00f3, an\u00e0lisi de documents jur\u00eddics extensos i escriptura matisada\/humana.\",\n weakness: \"Pot ser excessivament formal ('rebuig' per seguretat) i m\u00e9s lent en respostes curtes.\"\n },\n {\n id: \"chatgpt-gemini\",\n name: \"ChatGPT \/ Gemini\",\n strength: \"Versatilitat Total i Ecosistema Google. Excel\u00b7lent mem\u00f2ria, agents aut\u00f2noms i integraci\u00f3 nativa amb Workspace.\",\n ideal: \"\u00das general, m\u00e0rqueting, big data i video analytics.\",\n weakness: \"Alt cost en \u00fas intensiu, menys creativitat liter\u00e0ria que Claude i depend\u00e8ncia de Google.\"\n },\n {\n id: \"deepseek\",\n name: \"DeepSeek\",\n strength: \"Efici\u00e8ncia T\u00e8cnica (Cost\/Rendiment). Nivell superior en matem\u00e0tiques i codi a una fracci\u00f3 del cost d'USA.\",\n ideal: \"Desenvolupadors, enginyers i tasques t\u00e8cniques que requereixen baix cost per token.\",\n weakness: \"M\u00e9s limitat en suport global i reducci\u00f3 de capacitat en matisos culturals occidentals.\"\n },\n {\n id: \"grok\",\n name: \"Grok\",\n strength: \"Temps real i tend\u00e8ncies. Acc\u00e9s directe al flux de dades de X (Twitter). Visi\u00f3 'sense censura'.\",\n ideal: \"Periodistes, an\u00e0lisi de tend\u00e8ncies socials, gesti\u00f3 de crisis i marques personals.\",\n weakness: \"Menys profunditat en el raonament l\u00f2gic-estructural complex comparat amb els l\u00edders.\"\n }\n ];\n\n function initGame() {\n const draggablesContainer = document.getElementById('draggables');\n const tableBody = document.getElementById('table-body');\n const feedback = document.getElementById('feedback');\n \n \/\/ Barrejar noms per les opcions\n const shuffledNames = [...data].sort(() => Math.random() - 0.5);\n \n \/\/ Crear botons arrossegables\n shuffledNames.forEach(item => {\n const div = document.createElement('div');\n div.className = 'draggable bg-blue-600 text-white px-5 py-2 rounded-lg shadow hover:bg-blue-700 font-medium select-none';\n div.draggable = true;\n div.innerText = item.name;\n div.id = `drag-${item.id}`;\n div.dataset.target = item.id;\n \n div.addEventListener('dragstart', (e) => {\n e.dataTransfer.setData('text\/plain', item.id);\n e.target.style.opacity = '0.5';\n });\n\n div.addEventListener('dragend', (e) => {\n e.target.style.opacity = '1';\n });\n\n draggablesContainer.appendChild(div);\n });\n\n \/\/ Crear files de la taula\n data.forEach(item => {\n const tr = document.createElement('tr');\n tr.className = 'hover:bg-gray-50 transition-colors';\n tr.innerHTML = `\n <td class=\"p-4 border-b\">\n <div class=\"drop-zone border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center p-2 text-gray-400 text-xs text-center\" \n data-id=\"${item.id}\">\n Deixa anar aqu\u00ed\n <\/div>\n <\/td>\n <td class=\"p-4 border-b text-sm text-gray-700\">${item.strength}<\/td>\n <td class=\"p-4 border-b text-sm text-gray-700\">${item.ideal}<\/td>\n <td class=\"p-4 border-b text-sm text-gray-500 italic\">${item.weakness}<\/td>\n `;\n tableBody.appendChild(tr);\n });\n\n \/\/ L\u00f2gica de Drop\n document.querySelectorAll('.drop-zone').forEach(zone => {\n zone.addEventListener('dragover', (e) => {\n e.preventDefault();\n if (!zone.classList.contains('correct')) {\n zone.classList.add('drag-over');\n }\n });\n\n zone.addEventListener('dragleave', () => {\n zone.classList.remove('drag-over');\n });\n\n zone.addEventListener('drop', (e) => {\n e.preventDefault();\n zone.classList.remove('drag-over');\n const droppedId = e.dataTransfer.getData('text\/plain');\n const targetId = zone.dataset.id;\n\n if (droppedId === targetId) {\n const originalElement = document.getElementById(`drag-${droppedId}`);\n zone.innerText = originalElement.innerText;\n zone.classList.add('correct');\n zone.classList.remove('text-gray-400', 'text-xs');\n zone.classList.add('font-bold', 'text-base');\n originalElement.remove();\n checkWin();\n } else {\n \/\/ Resposta incorrecta temporal\n zone.classList.add('wrong');\n setTimeout(() => zone.classList.remove('wrong'), 500);\n }\n });\n });\n }\n\n function checkWin() {\n const corrects = document.querySelectorAll('.correct').length;\n if (corrects === data.length) {\n document.getElementById('feedback').classList.remove('hidden');\n }\n }\n\n function resetGame() {\n document.getElementById('draggables').innerHTML = '';\n document.getElementById('table-body').innerHTML = '';\n document.getElementById('feedback').classList.add('hidden');\n initGame();\n }\n\n window.onload = initGame;\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p> Exercici Interactiu: Models d’IA<\/p>\n<p> .drag-over {<br \/>\n background-color:… <a href=\"https:\/\/serveiseducatius.xtec.cat\/segria\/general\/prova-canvas-gemini\/\" title=\"Read prova CANVAS Gemini\">Llegeix m\u00e9s\u00bb<\/a><\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-27212","post","type-post","status-publish","format-standard","hentry","category-general"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/serveiseducatius.xtec.cat\/segria\/wp-json\/wp\/v2\/posts\/27212","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/serveiseducatius.xtec.cat\/segria\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/serveiseducatius.xtec.cat\/segria\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/serveiseducatius.xtec.cat\/segria\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/serveiseducatius.xtec.cat\/segria\/wp-json\/wp\/v2\/comments?post=27212"}],"version-history":[{"count":6,"href":"https:\/\/serveiseducatius.xtec.cat\/segria\/wp-json\/wp\/v2\/posts\/27212\/revisions"}],"predecessor-version":[{"id":27311,"href":"https:\/\/serveiseducatius.xtec.cat\/segria\/wp-json\/wp\/v2\/posts\/27212\/revisions\/27311"}],"wp:attachment":[{"href":"https:\/\/serveiseducatius.xtec.cat\/segria\/wp-json\/wp\/v2\/media?parent=27212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/serveiseducatius.xtec.cat\/segria\/wp-json\/wp\/v2\/categories?post=27212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/serveiseducatius.xtec.cat\/segria\/wp-json\/wp\/v2\/tags?post=27212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}