WangDL
6062077e97
- AI home screen - Learning workspace - AI assistant - Learning analysis - Knowledge journey - Active recall lesson - Growth profile - Ethereal intelligence design
239 lines
13 KiB
HTML
239 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
|
||
<html lang="zh-CN"><head>
|
||
<meta charset="utf-8"/>
|
||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" name="viewport"/>
|
||
<title>知习 - 认知心理学 · 记忆</title>
|
||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
<script id="tailwind-config">
|
||
tailwind.config = {
|
||
darkMode: "class",
|
||
theme: {
|
||
extend: {
|
||
"colors": {
|
||
"on-secondary-fixed": "#2c0050",
|
||
"background": "#f9f9fd",
|
||
"secondary-fixed": "#f0dbff",
|
||
"on-secondary": "#ffffff",
|
||
"tertiary-fixed": "#e1e0ff",
|
||
"error-container": "#ffdad6",
|
||
"inverse-surface": "#2e3034",
|
||
"tertiary-fixed-dim": "#c0c1ff",
|
||
"on-primary-fixed": "#001c39",
|
||
"surface-bright": "#f9f9fd",
|
||
"on-secondary-container": "#440076",
|
||
"tertiary": "#4648d4",
|
||
"primary-fixed-dim": "#a4c9ff",
|
||
"outline": "#717783",
|
||
"on-tertiary-fixed-variant": "#2f2ebe",
|
||
"on-tertiary-container": "#fffbff",
|
||
"primary": "#005da7",
|
||
"secondary-fixed-dim": "#deb7ff",
|
||
"on-primary-fixed-variant": "#004883",
|
||
"inverse-on-surface": "#f0f0f4",
|
||
"error": "#ba1a1a",
|
||
"on-primary-container": "#fdfcff",
|
||
"on-primary": "#ffffff",
|
||
"surface-container-low": "#f3f3f7",
|
||
"surface-container-highest": "#e2e2e6",
|
||
"on-tertiary-fixed": "#07006c",
|
||
"surface-dim": "#d9dade",
|
||
"inverse-primary": "#a4c9ff",
|
||
"surface-variant": "#e2e2e6",
|
||
"surface-container-lowest": "#ffffff",
|
||
"surface-tint": "#0060ac",
|
||
"primary-container": "#2976c7",
|
||
"surface": "#f9f9fd",
|
||
"on-surface-variant": "#414751",
|
||
"on-background": "#1a1c1f",
|
||
"surface-container-high": "#e8e8ec",
|
||
"on-error-container": "#93000a",
|
||
"secondary": "#8135c5",
|
||
"on-secondary-fixed-variant": "#670fac",
|
||
"outline-variant": "#c1c7d3",
|
||
"on-tertiary": "#ffffff",
|
||
"on-surface": "#1a1c1f",
|
||
"on-error": "#ffffff",
|
||
"secondary-container": "#ba70ff",
|
||
"primary-fixed": "#d4e3ff",
|
||
"tertiary-container": "#6063ee",
|
||
"surface-container": "#ededf1"
|
||
},
|
||
"borderRadius": {
|
||
"DEFAULT": "0.25rem",
|
||
"lg": "0.5rem",
|
||
"xl": "0.75rem",
|
||
"full": "9999px"
|
||
},
|
||
"spacing": {
|
||
"xl": "64px",
|
||
"md": "24px",
|
||
"container-margin": "20px",
|
||
"base": "8px",
|
||
"sm": "12px",
|
||
"lg": "40px",
|
||
"xs": "4px",
|
||
"gutter": "16px"
|
||
},
|
||
"fontFamily": {
|
||
"h3": ["Manrope"],
|
||
"h2": ["Manrope"],
|
||
"label-caps": ["Manrope"],
|
||
"body-md": ["Manrope"],
|
||
"body-lg": ["Manrope"],
|
||
"h1": ["Manrope"]
|
||
},
|
||
"fontSize": {
|
||
"h3": ["22px", { "lineHeight": "1.3", "letterSpacing": "0", "fontWeight": "600" }],
|
||
"h2": ["28px", { "lineHeight": "1.3", "letterSpacing": "-0.01em", "fontWeight": "600" }],
|
||
"label-caps": ["12px", { "lineHeight": "1.0", "letterSpacing": "0.05em", "fontWeight": "600" }],
|
||
"body-md": ["15px", { "lineHeight": "1.5", "letterSpacing": "0", "fontWeight": "400" }],
|
||
"body-lg": ["17px", { "lineHeight": "1.6", "letterSpacing": "-0.01em", "fontWeight": "400" }],
|
||
"h1": ["34px", { "lineHeight": "1.2", "letterSpacing": "-0.02em", "fontWeight": "700" }]
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
body {
|
||
font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||
background-color: #f9f9fd;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
.material-symbols-outlined {
|
||
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
|
||
}
|
||
.ai-glow-btn {
|
||
background: linear-gradient(135deg, #005da7 0%, #4648d4 100%);
|
||
box-shadow: 0 8px 24px rgba(70, 72, 212, 0.25);
|
||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||
}
|
||
.ai-glow-btn:active {
|
||
transform: scale(0.96);
|
||
box-shadow: 0 4px 12px rgba(70, 72, 212, 0.15);
|
||
}
|
||
.glass-panel {
|
||
background: rgba(255, 255, 255, 0.7);
|
||
backdrop-filter: blur(24px);
|
||
-webkit-backdrop-filter: blur(24px);
|
||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||
}
|
||
.ambient-shadow {
|
||
box-shadow: 0 20px 40px rgba(0, 93, 167, 0.04);
|
||
}
|
||
</style>
|
||
<style>
|
||
body {
|
||
min-height: max(884px, 100dvh);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="text-on-background bg-background min-h-screen flex flex-col pb-safe">
|
||
<!-- Top Navigation (Task-Focused Context: No Bottom Nav or global TopAppBar) -->
|
||
<header class="sticky top-0 z-40 bg-surface/80 backdrop-blur-xl border-b border-surface-container-high px-5 py-3 flex justify-between items-center w-full transition-all duration-300">
|
||
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container transition-colors active:scale-95 text-on-surface-variant">
|
||
<span class="material-symbols-outlined">arrow_back</span>
|
||
</button>
|
||
<div class="flex-1 text-center">
|
||
<h1 class="font-h3 text-h3 text-on-background tracking-tight">认知心理学 · 记忆</h1>
|
||
</div>
|
||
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container transition-colors active:scale-95 text-on-surface-variant">
|
||
<span class="material-symbols-outlined">more_horiz</span>
|
||
</button>
|
||
</header>
|
||
<main class="flex-1 px-5 lg:px-10 max-w-3xl mx-auto w-full pt-6 pb-24 flex flex-col gap-xl">
|
||
<!-- Reading Area -->
|
||
<section class="flex flex-col gap-lg animate-fade-in-up">
|
||
<header>
|
||
<h2 class="font-h1 text-h1 text-on-background mb-4">理解编码与提取</h2>
|
||
</header>
|
||
<!-- Learning Objectives -->
|
||
<div class="glass-panel ambient-shadow rounded-xl p-md">
|
||
<h3 class="font-label-caps text-label-caps text-primary mb-3 uppercase flex items-center gap-2">
|
||
<span class="material-symbols-outlined text-[16px]">flag</span>
|
||
本节目标
|
||
</h3>
|
||
<ul class="flex flex-col gap-2">
|
||
<li class="flex items-start gap-3">
|
||
<div class="w-1.5 h-1.5 rounded-full bg-primary mt-2 flex-shrink-0"></div>
|
||
<p class="font-body-md text-body-md text-on-surface-variant">区分记忆的三个主要阶段：编码、存储和提取。</p>
|
||
</li>
|
||
<li class="flex items-start gap-3">
|
||
<div class="w-1.5 h-1.5 rounded-full bg-primary mt-2 flex-shrink-0"></div>
|
||
<p class="font-body-md text-body-md text-on-surface-variant">解释“深度加工”理论如何影响信息留存率。</p>
|
||
</li>
|
||
<li class="flex items-start gap-3">
|
||
<div class="w-1.5 h-1.5 rounded-full bg-primary mt-2 flex-shrink-0"></div>
|
||
<p class="font-body-md text-body-md text-on-surface-variant">掌握至少两种利用上下文线索促进记忆提取的方法。</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- Reading Content -->
|
||
<article class="font-body-lg text-body-lg text-on-background leading-relaxed space-y-6">
|
||
<p>
|
||
在认知心理学中，记忆通常被概念化为一个信息处理系统，类似于计算机。这个过程可以划分为三个基本且连续的阶段：编码（Encoding）、存储（Storage）和提取（Retrieval）。
|
||
</p>
|
||
<p>
|
||
<strong class="text-on-primary-fixed-variant">编码</strong>是将外部感官信息转化为大脑能够处理和存储的神经表征的过程。这就如同我们在键盘上输入文字，将其转化为计算机能识别的代码。编码的质量直接决定了后续记忆的牢固程度。
|
||
</p>
|
||
<!-- Key Knowledge Highlight -->
|
||
<div class="my-6 bg-surface-container-lowest border-l-4 border-tertiary rounded-r-xl p-5 ambient-shadow">
|
||
<div class="flex items-center gap-2 mb-2 text-tertiary">
|
||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">lightbulb</span>
|
||
<span class="font-label-caps text-label-caps uppercase">核心概念 : 深度加工理论 (Levels of Processing)</span>
|
||
</div>
|
||
<p class="font-body-md text-body-md text-on-surface-variant m-0">
|
||
由 Craik 和 Lockhart (1972) 提出，该理论认为信息的留存不仅仅取决于我们重复它的次数，更取决于我们加工它的“深度”。关注词语的含义（语义加工）比仅仅关注它的声音或外观能产生更强韧的记忆痕迹。
|
||
</p>
|
||
</div>
|
||
<p>
|
||
当我们试图回想某事时，我们进入了<strong class="text-on-primary-fixed-variant">提取</strong>阶段。提取是从记忆库中搜寻并唤起已存储信息的过程。提取的成功不仅依赖于信息是否完好地存储，还很大程度上依赖于是否存在合适的“提取线索”（Retrieval Cues）。
|
||
</p>
|
||
</article>
|
||
</section>
|
||
<hr class="border-surface-container-high"/>
|
||
<!-- Active Recall Area -->
|
||
<section class="flex flex-col gap-6" id="active-recall-section">
|
||
<header class="text-center">
|
||
<h2 class="font-h2 text-h2 text-on-background mb-2">现在试着回忆一下</h2>
|
||
<p class="font-body-md text-body-md text-on-surface-variant">请不用翻看上面的内容，尝试用自己的话解释刚刚的知识点。</p>
|
||
</header>
|
||
<!-- Recall Input Area -->
|
||
<div class="relative w-full rounded-xl glass-panel ambient-shadow overflow-hidden transition-all focus-within:ring-2 focus-within:ring-primary focus-within:border-transparent">
|
||
<textarea class="w-full min-h-[200px] p-6 bg-transparent border-none resize-none focus:ring-0 font-body-md text-body-md text-on-background placeholder:text-outline-variant" placeholder="例如：记忆分为三个步骤... 深度加工是指..."></textarea>
|
||
<!-- Voice Input & Controls -->
|
||
<div class="absolute bottom-4 right-4 flex items-center gap-3">
|
||
<button class="w-12 h-12 rounded-full bg-surface-container hover:bg-surface-container-high transition-colors flex items-center justify-center text-primary active:scale-95 shadow-sm">
|
||
<span class="material-symbols-outlined">mic</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- Methodological Shortcuts -->
|
||
<div class="flex flex-wrap gap-3 justify-center">
|
||
<button class="px-4 py-2 rounded-full border border-surface-container-highest bg-surface-container-lowest text-on-surface-variant font-body-md text-[14px] hover:bg-surface-container transition-colors flex items-center gap-2 active:scale-95">
|
||
<span class="material-symbols-outlined text-[18px]">psychology</span>
|
||
用更简单的话解释
|
||
</button>
|
||
<button class="px-4 py-2 rounded-full border border-surface-container-highest bg-surface-container-lowest text-on-surface-variant font-body-md text-[14px] hover:bg-surface-container transition-colors flex items-center gap-2 active:scale-95">
|
||
<span class="material-symbols-outlined text-[18px]">extension</span>
|
||
给我一个例子
|
||
</button>
|
||
<button class="px-4 py-2 rounded-full border border-surface-container-highest bg-surface-container-lowest text-on-surface-variant font-body-md text-[14px] hover:bg-surface-container transition-colors flex items-center gap-2 active:scale-95">
|
||
<span class="material-symbols-outlined text-[18px]">search_insights</span>
|
||
提示我遗漏了什么
|
||
</button>
|
||
</div>
|
||
<!-- Primary Action -->
|
||
<div class="mt-4 flex justify-center">
|
||
<button class="ai-glow-btn px-8 py-4 rounded-xl text-on-primary font-h3 text-[18px] w-full max-w-md flex items-center justify-center gap-2">
|
||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||
交给 AI 分析
|
||
</button>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</body></html> |