feat: support audio in quizzes (#1733)

* feat: support audio in quizzes

* test code

* Revert "test code"

This reverts commit c3a9d33.

Author: huyenltnguyen

mobile-app/lib/models/learn/challenge_model.dart

@@ -67,7 +67,7 @@ class Challenge {
 
   // English Challenges
   final FillInTheBlank? fillInTheBlank;
-  final EnglishAudio? audio;
+  final EnglishScene? audio;
   final Scene? scene;
 
   // Nodules for interactive challenges
@@ -125,7 +125,7 @@ class Challenge {
           ? FillInTheBlank.fromJson(data['fillInTheBlank'])
           : null,
       audio: data['scene'] != null
-          ? EnglishAudio.fromJson(data['scene']['setup']['audio'])
+          ? EnglishScene.fromJson(data['scene']['setup']['audio'])
           : null,
       tests: (data['tests'] ?? [])
           .map<ChallengeTest>((file) => ChallengeTest.fromJson(file))
@@ -440,11 +440,13 @@ class QuizQuestion {
   final String text;
   final List<Answer> answers;
   final int solution;
+  final QuizAudioData? audioData;
 
   const QuizQuestion({
     required this.text,
     required this.answers,
     required this.solution,
+    this.audioData,
   });
 
   factory QuizQuestion.fromJson(Map<String, dynamic> data) {
@@ -466,7 +468,13 @@ class QuizQuestion {
         allAnswers.indexWhere((a) => a.answer == data['answer']) + 1;
 
     return QuizQuestion(
-        text: data['text'], answers: allAnswers, solution: solutionIndex);
+      text: data['text'],
+      answers: allAnswers,
+      solution: solutionIndex,
+      audioData: data['audioData'] != null
+          ? QuizAudioData.fromJson(data['audioData'])
+          : null,
+    );
   }
 }
 
@@ -510,7 +518,7 @@ class Scene {
 class SceneSetup {
   final String background;
   final bool? alwaysShowDialogue;
-  final EnglishAudio audio;
+  final EnglishScene audio;
   final List<SceneCharacter> characters;
 
   const SceneSetup({
@@ -523,7 +531,7 @@ class SceneSetup {
   factory SceneSetup.fromJson(Map<String, dynamic> data) {
     return SceneSetup(
       background: data['background'],
-      audio: EnglishAudio.fromJson(data['audio']),
+      audio: EnglishScene.fromJson(data['audio']),
       characters: data['characters']
           .map<SceneCharacter>(
             (character) => SceneCharacter.fromJson(character),
@@ -626,25 +634,96 @@ class SceneDialogue {
   }
 }
 
-class EnglishAudio {
+abstract class AudioClip {
+  String get fileName;
+  String? get startTimeStamp;
+  String? get finishTimeStamp;
+}
+
+class EnglishScene implements AudioClip {
+  @override
   final String fileName;
   final String startTime;
+  @override
   final String? startTimeStamp;
+  @override
   final String? finishTimeStamp;
 
-  const EnglishAudio({
+  const EnglishScene({
     required this.fileName,
     required this.startTime,
     required this.startTimeStamp,
     required this.finishTimeStamp,
   });
 
-  factory EnglishAudio.fromJson(Map<String, dynamic> data) {
-    return EnglishAudio(
+  factory EnglishScene.fromJson(Map<String, dynamic> data) {
+    return EnglishScene(
       fileName: data['filename'],
       startTime: data['startTime'].toString(),
       startTimeStamp: data['startTimestamp']?.toString(),
       finishTimeStamp: data['finishTimestamp']?.toString(),
     );
   }
 }
+
+class QuizTranscriptLine {
+  final String character;
+  final String text;
+
+  const QuizTranscriptLine({
+    required this.character,
+    required this.text,
+  });
+
+  factory QuizTranscriptLine.fromJson(Map<String, dynamic> data) {
+    return QuizTranscriptLine(
+      character: data['character'],
+      text: data['text'],
+    );
+  }
+}
+
+class QuizAudio implements AudioClip {
+  @override
+  final String fileName;
+  @override
+  final String? startTimeStamp;
+  @override
+  final String? finishTimeStamp;
+
+  const QuizAudio({
+    required this.fileName,
+    this.startTimeStamp,
+    this.finishTimeStamp,
+  });
+
+  factory QuizAudio.fromJson(Map<String, dynamic> data) {
+    return QuizAudio(
+      fileName: data['filename'],
+      startTimeStamp: data['startTimestamp']?.toString(),
+      finishTimeStamp: data['finishTimestamp']?.toString(),
+    );
+  }
+}
+
+class QuizAudioData {
+  final QuizAudio audio;
+  final List<QuizTranscriptLine> transcript;
+
+  const QuizAudioData({
+    required this.audio,
+    required this.transcript,
+  });
+
+  factory QuizAudioData.fromJson(Map<String, dynamic> data) {
+    final audioData = data['audio'];
+    return QuizAudioData(
+      audio: QuizAudio.fromJson(audioData),
+      transcript: (data['transcript'] as List)
+          .map<QuizTranscriptLine>(
+            (item) => QuizTranscriptLine.fromJson(item),
+          )
+          .toList(),
+    );
+  }
+}

mobile-app/lib/service/audio/audio_service.dart

@@ -239,7 +239,7 @@ class AudioPlayerHandler extends BaseAudioHandler {
     return 'https://cdn.freecodecamp.org/curriculum/english/animation-assets/sounds/$fileName';
   }
 
-  bool canSeek(bool forward, int currentDuration, EnglishAudio audio) {
+  bool canSeek(bool forward, int currentDuration, AudioClip audio) {
     currentDuration =
         currentDuration + parseTimeStamp(audio.startTimeStamp).inSeconds;
 
@@ -252,23 +252,21 @@ class AudioPlayerHandler extends BaseAudioHandler {
     }
   }
 
-  void loadEnglishAudio(EnglishAudio audio) async {
+  Future<void> loadCurriculumAudio(AudioClip audio) async {
     await _audioPlayer.setAudioSource(
       ClippingAudioSource(
         start: parseTimeStamp(audio.startTimeStamp),
         end: audio.finishTimeStamp == null
             ? null
             : parseTimeStamp(audio.finishTimeStamp),
         child: AudioSource.uri(
-          Uri.parse(
-            returnUrl(audio.fileName),
-          ),
+          Uri.parse(returnUrl(audio.fileName)),
         ),
       ),
     );
     await _audioPlayer.load();
     setEpisodeId = '';
-    _audioType = 'english';
+    _audioType = 'curriculum';
   }
 
   void _notifyAudioHandlerAboutPlaybackEvents() {

mobile-app/lib/ui/views/learn/challenge/templates/quiz/quiz_viewmodel.dart

@@ -59,6 +59,7 @@ class QuizViewModel extends BaseViewModel {
               text: q.text,
               answers: q.answers,
               solution: q.solution,
+              audioData: q.audioData,
             ))
         .toList();
   }
@@ -114,6 +115,7 @@ class QuizViewModel extends BaseViewModel {
               text: q.text,
               answers: q.answers,
               solution: q.solution,
+              audioData: q.audioData,
             ))
         .toList();
 

mobile-app/lib/ui/views/learn/widgets/audio/audio_player_view.dart

@@ -8,15 +8,15 @@ import 'package:stacked/stacked.dart';
 class AudioPlayerView extends StatelessWidget {
   const AudioPlayerView({super.key, required this.audio});
 
-  final EnglishAudio audio;
+  final EnglishScene audio;
 
   @override
   Widget build(BuildContext context) {
     return ViewModelBuilder<AudioPlayerViewmodel>.reactive(
       viewModelBuilder: () => AudioPlayerViewmodel(),
       onViewModelReady: (model) => {
         model.initPositionListener(),
-        model.audioService.loadEnglishAudio(audio)
+        model.audioService.loadCurriculumAudio(audio)
       },
       onDispose: (model) => model.onDispose(),
       builder: (context, model, child) => Padding(
@@ -48,7 +48,7 @@ class InnerAudioWidget extends StatelessWidget {
   });
 
   final AudioPlayerViewmodel model;
-  final EnglishAudio audio;
+  final EnglishScene audio;
   final PlaybackState playerState;
 
   @override

mobile-app/lib/ui/views/learn/widgets/audio/audio_player_viewmodel.dart

@@ -17,7 +17,7 @@ class AudioPlayerViewmodel extends BaseViewModel {
   Duration searchTimeStamp(
     bool forwards,
     int currentPosition,
-    EnglishAudio audio,
+    EnglishScene audio,
   ) {
     if (forwards) {
       return Duration(