345 lines
11 KiB
Dart
345 lines
11 KiB
Dart
part of '../lesson_flow.dart';
|
|
|
|
/// The unit's listening/reading comprehension step. It presents each material's
|
|
/// text (with word lookup and glosses) and a few multiple-choice questions. The
|
|
/// learner continues once every question is answered correctly or its answer
|
|
/// has been revealed — comprehension is checked, but it never blocks the lesson.
|
|
class _MaterialStep extends StatefulWidget {
|
|
const _MaterialStep({
|
|
required this.state,
|
|
required this.materials,
|
|
required this.onContinue,
|
|
});
|
|
|
|
final AppState state;
|
|
final List<PackMaterial> materials;
|
|
final VoidCallback onContinue;
|
|
|
|
@override
|
|
State<_MaterialStep> createState() => _MaterialStepState();
|
|
}
|
|
|
|
class _MaterialStepState extends State<_MaterialStep> {
|
|
/// materialIndex -> questionIndex -> selected option index.
|
|
final Map<int, Map<int, int>> _selected = {};
|
|
|
|
/// materialIndex -> questionIndex where the answer was revealed.
|
|
final Set<String> _revealed = {};
|
|
|
|
List<PackQuestion> _questions(int materialIndex) =>
|
|
widget.materials[materialIndex].questions;
|
|
|
|
List<String> _options(int materialIndex, int questionIndex) {
|
|
final q = _questions(materialIndex)[questionIndex];
|
|
return shuffledOptions(q.options, '${q.question}-material');
|
|
}
|
|
|
|
bool _isCorrect(int m, int q, int optionIndex) {
|
|
final options = _options(m, q);
|
|
if (optionIndex < 0 || optionIndex >= options.length) return false;
|
|
return options[optionIndex] == _questions(m)[q].answer;
|
|
}
|
|
|
|
bool _answered(int m, int q) {
|
|
if (_revealed.contains('$m-$q')) return true;
|
|
final chosen = _selected[m]?[q];
|
|
return chosen != null && _isCorrect(m, q, chosen);
|
|
}
|
|
|
|
bool get _allAnswered {
|
|
for (var m = 0; m < widget.materials.length; m++) {
|
|
for (var q = 0; q < _questions(m).length; q++) {
|
|
if (!_answered(m, q)) return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return _LessonScaffold(
|
|
step: 4,
|
|
child: SpacedColumn(
|
|
children: [
|
|
const Eyebrow('听读材料'),
|
|
Text(
|
|
'读一段真实的小材料，做完理解题。',
|
|
style: Theme.of(context).textTheme.headlineMedium,
|
|
),
|
|
for (var m = 0; m < widget.materials.length; m++)
|
|
_materialCard(context, m),
|
|
PrimaryButton(
|
|
label: _allAnswered ? '继续写一写' : '答对所有理解题后继续',
|
|
onPressed: _allAnswered ? widget.onContinue : null,
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _materialCard(BuildContext context, int m) {
|
|
final material = widget.materials[m];
|
|
final isListening = material.mode == 'listening';
|
|
return SpacedColumn(
|
|
children: [
|
|
SectionCard(
|
|
tint: AppColors.softGreen,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Icon(
|
|
isListening
|
|
? Icons.headphones_outlined
|
|
: Icons.menu_book_outlined,
|
|
size: 16,
|
|
color: AppColors.green,
|
|
),
|
|
const SizedBox(width: 6),
|
|
Text(
|
|
isListening ? '听力材料' : '阅读材料',
|
|
style: TextStyle(
|
|
fontSize: 13,
|
|
fontWeight: FontWeight.w600,
|
|
color: AppColors.green,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
InkWell(
|
|
onTap: () => VoiceService.instance.speak(material.text),
|
|
borderRadius: BorderRadius.circular(16),
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 8,
|
|
vertical: 4,
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Icon(
|
|
Icons.volume_up_outlined,
|
|
size: 16,
|
|
color: AppColors.green,
|
|
),
|
|
const SizedBox(width: 4),
|
|
Text(
|
|
'朗读',
|
|
style: TextStyle(
|
|
fontSize: 13,
|
|
color: AppColors.green,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
if (material.title.isNotEmpty) ...[
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
material.title,
|
|
style: const TextStyle(
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w700,
|
|
),
|
|
),
|
|
],
|
|
const SizedBox(height: 8),
|
|
// A listening material stays hidden until played, so the learner
|
|
// listens instead of reading it. Reading materials show the text.
|
|
if (isListening)
|
|
_ListeningRevealText(state: widget.state, text: material.text)
|
|
else
|
|
LexiconText(
|
|
material.text,
|
|
state: widget.state,
|
|
style: const TextStyle(fontSize: 16, height: 1.6),
|
|
),
|
|
if (material.glosses.isNotEmpty) ...[
|
|
const SizedBox(height: 12),
|
|
_GlossList(glosses: material.glosses),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
for (var q = 0; q < material.questions.length; q++)
|
|
_questionBlock(context, m, q),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _questionBlock(BuildContext context, int m, int q) {
|
|
final question = _questions(m)[q];
|
|
final options = _options(m, q);
|
|
final chosen = _selected[m]?[q];
|
|
final revealed = _revealed.contains('$m-$q');
|
|
return SpacedColumn(
|
|
children: [
|
|
SectionCard(
|
|
tint: AppColors.surfaceMuted,
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.green.withValues(alpha: 0.12),
|
|
borderRadius: BorderRadius.circular(6),
|
|
),
|
|
child: Text(
|
|
'问题',
|
|
style: TextStyle(
|
|
color: AppColors.green,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 12,
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(width: 10),
|
|
Expanded(
|
|
child: Text(
|
|
question.question,
|
|
style: TextStyle(
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w600,
|
|
color: AppColors.ink,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
for (var index = 0; index < options.length; index++)
|
|
SectionCard(
|
|
tint: chosen == index
|
|
? (_isCorrect(m, q, index)
|
|
? AppColors.softGreen
|
|
: AppColors.warm)
|
|
: null,
|
|
onTap: () => setState(() {
|
|
(_selected[m] ??= {})[q] = index;
|
|
}),
|
|
child: Row(
|
|
children: [
|
|
Icon(
|
|
chosen == index
|
|
? (_isCorrect(m, q, index)
|
|
? Icons.check_circle
|
|
: Icons.cancel_outlined)
|
|
: Icons.radio_button_off,
|
|
color: chosen == index
|
|
? (_isCorrect(m, q, index)
|
|
? AppColors.green
|
|
: AppColors.warmInk)
|
|
: AppColors.muted,
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Text(
|
|
options[index],
|
|
style: TextStyle(
|
|
fontSize: 15,
|
|
fontWeight: chosen == index
|
|
? FontWeight.w600
|
|
: FontWeight.normal,
|
|
color: chosen == index
|
|
? (_isCorrect(m, q, index)
|
|
? AppColors.green
|
|
: AppColors.warmInk)
|
|
: AppColors.ink,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
if (revealed)
|
|
SectionCard(
|
|
tint: AppColors.warm,
|
|
child: Text(
|
|
'答案：${question.answer}',
|
|
style: TextStyle(color: AppColors.warmInk),
|
|
),
|
|
)
|
|
else if (chosen != null && !_isCorrect(m, q, chosen))
|
|
TextButton(
|
|
onPressed: () => setState(() => _revealed.add('$m-$q')),
|
|
child: const Text('查看答案后继续'),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
/// Keeps a listening material's transcript hidden until it has been played, so
|
|
/// the learner answers from listening rather than reading.
|
|
class _ListeningRevealText extends StatefulWidget {
|
|
const _ListeningRevealText({required this.state, required this.text});
|
|
|
|
final AppState state;
|
|
final String text;
|
|
|
|
@override
|
|
State<_ListeningRevealText> createState() => _ListeningRevealTextState();
|
|
}
|
|
|
|
class _ListeningRevealTextState extends State<_ListeningRevealText> {
|
|
bool _shown = false;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
if (_shown) {
|
|
return LexiconText(
|
|
widget.text,
|
|
state: widget.state,
|
|
style: const TextStyle(fontSize: 16, height: 1.6),
|
|
);
|
|
}
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text('先点“朗读”听两遍，再作答。', style: TextStyle(color: AppColors.muted)),
|
|
const SizedBox(height: 6),
|
|
TextButton.icon(
|
|
onPressed: () => setState(() => _shown = true),
|
|
icon: const Icon(Icons.visibility_outlined, size: 18),
|
|
label: const Text('显示原文'),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
/// The material's untaught words with their Chinese glosses.
|
|
class _GlossList extends StatelessWidget {
|
|
const _GlossList({required this.glosses});
|
|
|
|
final Map<String, String> glosses;
|
|
|
|
@override
|
|
Widget build(BuildContext context) => Wrap(
|
|
spacing: 8,
|
|
runSpacing: 6,
|
|
children: [
|
|
for (final entry in glosses.entries)
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.surface,
|
|
borderRadius: BorderRadius.circular(8),
|
|
border: Border.all(color: AppColors.line),
|
|
),
|
|
child: Text(
|
|
'${entry.key} · ${entry.value}',
|
|
style: const TextStyle(fontSize: 13),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|