Quizz wip

This commit is contained in:
Thomas Fransolet 2024-01-05 17:29:48 +01:00
parent 5f425eb65a
commit 25f5213940
6 changed files with 223 additions and 154 deletions

View File

@ -31,9 +31,9 @@ class _VideoViewerYoutube extends State<VideoViewerYoutube> {
final _controllerWeb = iframe.YoutubePlayerController(
params: iframe.YoutubePlayerParams(
mute: false,
showControls: true,
showFullscreenButton: false,
loop: true,
showControls: false,
showFullscreenButton: true,
loop: false,
showVideoAnnotations: false,
strictRelatedVideos: false,
enableKeyboard: false,
@ -43,6 +43,9 @@ class _VideoViewerYoutube extends State<VideoViewerYoutube> {
);
_controllerWeb.loadVideo(widget.videoUrl);
if(!widget.isAuto) {
_controllerWeb.stopVideo();
}
_videoViewWeb = iframe.YoutubePlayer(
controller: _controllerWeb,

View File

@ -11,7 +11,6 @@ import 'package:tablet_app/Models/tabletContext.dart';
import 'package:tablet_app/Screens/Puzzle/message_dialog.dart';
import 'package:tablet_app/app_context.dart';
import 'puzzle_piece.dart';
import 'score_widget.dart';
const IMAGE_PATH = 'image_path';

View File

@ -10,8 +10,10 @@ import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
import 'package:manager_api/api.dart';
import 'package:provider/provider.dart';
import 'package:tablet_app/Components/Buttons/rounded_button.dart';
import 'package:tablet_app/Components/show_element_for_resource.dart';
import 'package:tablet_app/Models/ResponseSubDTO.dart';
import 'package:tablet_app/Screens/Quizz/showResponses.dart';
import 'package:tablet_app/Screens/Slider/slider_view.dart';
import 'package:tablet_app/app_context.dart';
import 'package:tablet_app/constants.dart';
@ -75,20 +77,20 @@ class _QuizzView extends State<QuizzView> {
goodResponses +=1;
});
log("goodResponses =" + goodResponses.toString());
var levelToShow;
LevelDTO? levelToShow;
var test = goodResponses/quizzDTO.questions!.length;
if(0 == test || test < 0.25)
levelToShow = quizzDTO.badLevel;
levelToShow = quizzDTO.badLevel!;
if(test>=0.25 && test < 0.5)
levelToShow = quizzDTO.mediumLevel;
levelToShow = quizzDTO.mediumLevel!;
if(test>=0.5 && test < 0.75)
levelToShow = quizzDTO.goodLevel;
levelToShow = quizzDTO.goodLevel!;
if(test>=0.75 && test <= 1)
levelToShow = quizzDTO.greatLevel;
levelToShow = quizzDTO.greatLevel!;
return Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisAlignment: MainAxisAlignment.spaceAround, //
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Center(
@ -111,56 +113,29 @@ class _QuizzView extends State<QuizzView> {
),
),
),
if (!showResponses && levelToShow?.source_ != null)
if (!showResponses && levelToShow!.label != null && levelToShow.label!.firstWhere((translation) => translation.language == appContext.getContext().language).resourceId != null)
Container(
//height: size.height * 0.2,
//width: size.width * 0.25,
constraints: BoxConstraints(
maxHeight: kIsWeb ? size.height * 0.20 : size.height * 0.25,
maxWidth: kIsWeb ? size.width * 0.20 : size.width * 0.25,
maxHeight: kIsWeb ? size.height * 0.20 : size.height * 0.20, //size.height * 0.25
maxWidth: kIsWeb ? size.width * 0.20 : size.width * 0.20, //size.width * 0.25
),
alignment: Alignment.center,
decoration: BoxDecoration(
image: levelToShow.source_ != null ? new DecorationImage(
fit: BoxFit.contain,
opacity: 0.85,
image: CachedNetworkImageProvider(levelToShow.source_), /*new NetworkImage(
levelToShow.source_,
)*/
): null,
borderRadius: BorderRadius.all( Radius.circular(50.0)),
border: Border.all(
color: kBackgroundGrey,
width: 1.0,
),
),
child: Container(
//borderRadius: BorderRadius.all(Radius.circular(25.0)),
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
image: DecorationImage(
image: CachedNetworkImageProvider(levelToShow.source_),/*new NetworkImage(
levelToShow.source_,
),*/
fit: BoxFit.cover,
),
borderRadius: BorderRadius.all( Radius.circular(50.0)),
border: Border.all(
color: kBackgroundGrey,
width: 1.0,
),
),
),
child : getElementForResource(context, appContext, levelToShow.label!.firstWhere((translation) => translation.language == appContext.getContext().language)),
),
Container(
child: Text('$goodResponses/${quizzDTO.questions!.length}', textAlign: TextAlign.center, style: TextStyle(fontSize: kIsWeb ? (showResponses ? 60 : 100) : 150, color: kBackgroundSecondGrey)),
height: 90,
//color: Colors.orange,
child: Text('$goodResponses/${quizzDTO.questions!.length}', textAlign: TextAlign.center, style: TextStyle(fontSize: kIsWeb ? (showResponses ? 60 : 100) : (showResponses ? 60 : 70), color: kBackgroundSecondGrey)),
),
if(!showResponses)
Container(
child: Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Container(
width: MediaQuery.of(context).size.width *0.75,
height: kIsWeb ? (showResponses ? MediaQuery.of(context).size.height *0.10 : MediaQuery.of(context).size.height *0.20) : MediaQuery.of(context).size.height *0.25,
height: kIsWeb ? (showResponses ? MediaQuery.of(context).size.height *0.10 : MediaQuery.of(context).size.height *0.20) : (showResponses ? MediaQuery.of(context).size.height *0.10 : MediaQuery.of(context).size.height *0.20), //MediaQuery.of(context).size.height *0.25
decoration: BoxDecoration(
color: kBackgroundLight,
shape: BoxShape.rectangle,
@ -182,7 +157,7 @@ class _QuizzView extends State<QuizzView> {
padding: const EdgeInsets.all(15.0),
child: levelToShow != null ?
HtmlWidget(
levelToShow.label.firstWhere((translation) => translation.language == appContext.getContext().language).value != null ? levelToShow.label.firstWhere((translation) => translation.language == appContext.getContext().language).value : "",
levelToShow.label!.firstWhere((translation) => translation.language == appContext.getContext().language).value != null ? levelToShow.label!.firstWhere((translation) => translation.language == appContext.getContext().language).value! : "",
textStyle: TextStyle(fontSize: kIsWeb ? kWebDescriptionSize : kDescriptionSize),
customStylesBuilder: (element) {
return {'text-align': 'center'};
@ -199,7 +174,7 @@ class _QuizzView extends State<QuizzView> {
if(showResponses)
Container(
width: MediaQuery.of(context).size.width *0.75,
height: kIsWeb ? MediaQuery.of(context).size.height *0.35 : MediaQuery.of(context).size.height *0.35,
height: kIsWeb ? MediaQuery.of(context).size.height *0.35 : MediaQuery.of(context).size.height *0.5, //MediaQuery.of(context).size.height *0.55
decoration: BoxDecoration(
color: kBackgroundLight,
shape: BoxShape.rectangle,
@ -227,7 +202,7 @@ class _QuizzView extends State<QuizzView> {
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: kIsWeb ? 50 : 85,
height: kIsWeb ? 50 : 50, //85
child: RoundedButton(
text: "Recommencer",
color: kBackgroundSecondGrey,
@ -241,14 +216,14 @@ class _QuizzView extends State<QuizzView> {
_questionsSubDTO = QuestionSubDTO().fromJSON(quizzDTO.questions!);
});
},
fontSize: kIsWeb ? kWebDescriptionSize : 30,
fontSize: kIsWeb ? kWebDescriptionSize : kWebDescriptionSize, //30
horizontal: 30,
vertical: 10
),
),
if(!showResponses)
Container(
height: kIsWeb ? 50 : 85,
height: kIsWeb ? 50 : 50, //85
child: RoundedButton(
text: "Voir les réponses",
color: kBackgroundSecondGrey,
@ -259,7 +234,7 @@ class _QuizzView extends State<QuizzView> {
showResponses = true;
});
},
fontSize: kIsWeb ? kWebDescriptionSize : 30,
fontSize: kIsWeb ? kWebDescriptionSize : kWebDescriptionSize, //30
horizontal: 30,
vertical: 10
),
@ -277,7 +252,7 @@ class _QuizzView extends State<QuizzView> {
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
if(_questionsSubDTO != null && _questionsSubDTO.length > 0)
if(_questionsSubDTO.length > 0)
CarouselSlider(
carouselController: sliderController,
options: CarouselOptions(
@ -325,16 +300,17 @@ class _QuizzView extends State<QuizzView> {
//mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Padding(
padding: const EdgeInsets.all(10.0),
padding: const EdgeInsets.all(8.0),
child: Container(
//width: MediaQuery.of(context).size.width *0.65,
height: MediaQuery.of(context).size.height *0.25,
child: Stack(
children: [
Center(
height: MediaQuery.of(context).size.height *0.3,
color: Colors.green,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Center(
child: Container(
decoration: BoxDecoration(
color: kBackgroundLight,
color: Colors.orange,// kBackgroundLight,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
@ -346,12 +322,27 @@ class _QuizzView extends State<QuizzView> {
),
],
),
width: MediaQuery.of(context).size.width *0.65,
height: MediaQuery.of(context).size.height *0.18,
width: MediaQuery.of(context).size.width *0.70,
child: Center(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Row(
children: [
if(i.label!.firstWhere((translation) => translation.language == appContext.getContext().language).resourceId != null)
Container(
//height: size.height * 0.2,
//width: size.width * 0.25,
constraints: BoxConstraints(
maxHeight: size.height * 0.28, //size.height * 0.25
maxWidth: size.width * 0.20, //size.width * 0.25
),
alignment: Alignment.center,
child : Padding(
padding: const EdgeInsets.all(10.0),
child: getElementForResource(context, appContext, i.label!.firstWhere((translation) => translation.language == appContext.getContext().language)),
)
),
Padding(
padding: const EdgeInsets.all(10.0),
child: HtmlWidget(
i.label!.firstWhere((translation) => translation.language == appContext.getContext().language).value != null ? i.label!.firstWhere((translation) => translation.language == appContext.getContext().language).value! : "",
textStyle: TextStyle(fontSize: kIsWeb ? kWebDescriptionSize : kDescriptionSize),
@ -360,11 +351,12 @@ class _QuizzView extends State<QuizzView> {
},
),
),
],
),
),
),
)
),
]
),
),
),
@ -379,12 +371,12 @@ class _QuizzView extends State<QuizzView> {
width: MediaQuery.of(context).size.width * 0.72,
//color: Colors.green,
child: Padding(
padding: const EdgeInsets.all(10.0),
padding: const EdgeInsets.all(0.0),
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisExtent: kIsWeb ? 75 : 100, // TODO depends on percentage 150
mainAxisSpacing: kIsWeb ? 75 : 45, // TODO depends on percentage
mainAxisExtent: kIsWeb ? 75 : 150, // TODO depends on percentage 150
mainAxisSpacing: kIsWeb ? 75 : 5, // TODO depends on percentage
crossAxisSpacing: kIsWeb ? 75 : 20, // TODO depends on percentage
),
itemCount: i.responsesSubDTO!.length,
@ -406,6 +398,26 @@ class _QuizzView extends State<QuizzView> {
padding: const EdgeInsets.all(8.0),
child: Container(
alignment: Alignment.center,
child: Row(// just to use if else
mainAxisAlignment: i.responsesSubDTO![index].label!.firstWhere((translation) => translation.language == appContext.getContext().language).resourceId == null ? MainAxisAlignment.center : MainAxisAlignment.start,
children: [
if(i.responsesSubDTO![index].label!.firstWhere((translation) => translation.language == appContext.getContext().language).resourceId != null)
Container(
//height: size.height * 0.2,
//width: size.width * 0.25,
constraints: BoxConstraints(
maxHeight: size.height * 0.28, //size.height * 0.25
maxWidth: size.width * 0.20, //size.width * 0.25
),
alignment: Alignment.center,
child : Padding(
padding: const EdgeInsets.all(10.0),
child: getElementForResource(context, appContext, i.responsesSubDTO![index].label!.firstWhere((translation) => translation.language == appContext.getContext().language)),
)
),
Container(
width: size.width * 0.1,
//color: Colors.yellow,
child: HtmlWidget(
i.responsesSubDTO![index].label!.firstWhere((translation) => translation.language == appContext.getContext().language).value != null ? i.responsesSubDTO![index].label!.firstWhere((translation) => translation.language == appContext.getContext().language).value! : "",
textStyle: TextStyle(fontSize: kIsWeb ? kWebDescriptionSize : kDescriptionSize, color: i.chosen == index ? Colors.white : Colors.black),
@ -413,6 +425,9 @@ class _QuizzView extends State<QuizzView> {
return {'text-align': 'center'};
},
),
),
],
),
decoration: BoxDecoration(
color: i.chosen == index ? kTestSecondColor : kBackgroundLight,
shape: BoxShape.rectangle,
@ -444,7 +459,7 @@ class _QuizzView extends State<QuizzView> {
),
],
),
if(_questionsSubDTO != null && _questionsSubDTO.length > 1 && currentIndex != _questionsSubDTO.length && _questionsSubDTO[currentIndex-1].chosen != null && quizzDTO.questions!.length > 0)
if(_questionsSubDTO.length > 1 && currentIndex != _questionsSubDTO.length && _questionsSubDTO[currentIndex-1].chosen != null && quizzDTO.questions!.length > 0)
Positioned(
top: MediaQuery.of(context).size.height * 0.35,
right: 60,
@ -465,12 +480,12 @@ class _QuizzView extends State<QuizzView> {
},
child: Icon(
Icons.chevron_right,
size: kIsWeb ? 100 : 95,
size: kIsWeb ? 100 : 100, // 95
color: kTestSecondColor,
),
)
),
if(_questionsSubDTO != null && _questionsSubDTO.length > 1 && currentIndex != 1)
if(_questionsSubDTO.length > 1 && currentIndex != 1)
Positioned(
top: MediaQuery.of(context).size.height * 0.35,
left: 60,
@ -481,12 +496,12 @@ class _QuizzView extends State<QuizzView> {
},
child: Icon(
Icons.chevron_left,
size: kIsWeb ? 100 : 95,
size: kIsWeb ? 100 : 100, //95
color: kTestSecondColor,
),
)
),
if(_questionsSubDTO != null && _questionsSubDTO.length > 0)
if(_questionsSubDTO.length > 0)
Padding(
padding: const EdgeInsets.only(bottom: 0),
child: Align(
@ -499,9 +514,61 @@ class _QuizzView extends State<QuizzView> {
)
),
),
if(_questionsSubDTO == null || _questionsSubDTO.length == 0)
if(_questionsSubDTO.length == 0)
Center(child: Text("Aucune question à afficher", style: TextStyle(fontSize: kNoneInfoOrIncorrect),))
]
);
}
}
getElementForResource(BuildContext context, AppContext appContext, TranslationAndResourceDTO i) {
var widgetToInclude;
switch(i.resourceType) {
case ResourceType.Image:
case ResourceType.ImageUrl:
widgetToInclude = Container(
//borderRadius: BorderRadius.all(Radius.circular(25.0)),
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
image: DecorationImage(
image: CachedNetworkImageProvider(i.resourceUrl!),/*new NetworkImage(
levelToShow.source_,
),*/
fit: BoxFit.cover,
),
borderRadius: BorderRadius.all(Radius.circular(15.0)),
border: Border.all(
color: kBackgroundGrey,
width: 1.0,
),
),
);
break;
case ResourceType.Video:
case ResourceType.VideoUrl:
case ResourceType.Audio:
widgetToInclude = Container(
decoration: BoxDecoration(
color: kBackgroundSecondGrey,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(15.0),
),
child: showElementForResource(ResourceDTO(id: i.resourceId, url: i.resourceUrl, type: i.resourceType), appContext, false, true),
);
break;
}
return Center(
child: Container(
height: MediaQuery.of(context).size.height * 0.6,
width: MediaQuery.of(context).size.width * 0.72,
child: AspectRatio(
aspectRatio: 16 / 9,
child: ClipRect(
child: widgetToInclude,
),
),
),
);
}

View File

@ -45,7 +45,7 @@ class _ShowReponsesWidget extends State<ShowReponsesWidget> {
Widget build(BuildContext context) {
Size sizeAll = MediaQuery.of(context).size;
Size size = Size(sizeAll.width * 0.65, kIsWeb ? sizeAll.height * 0.5 : sizeAll.height * 0.32);
Size size = Size(sizeAll.width * 0.65, kIsWeb ? sizeAll.height * 0.5 : sizeAll.height * 0.5); //sizeAll.height * 0.32
final appContext = Provider.of<AppContext>(context);
return Stack(
@ -154,8 +154,8 @@ class _ShowReponsesWidget extends State<ShowReponsesWidget> {
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisExtent: kIsWeb ? 65 : 125, // TODO depends on percentage
mainAxisSpacing: kIsWeb ? 10: 15, // TODO depends on percentage
mainAxisExtent: kIsWeb ? 65 : 65, // TODO depends on percentage 125
mainAxisSpacing: kIsWeb ? 10 : 10, // TODO depends on percentage 15
crossAxisSpacing: 5,
),
itemCount: i.responsesSubDTO!.length,
@ -201,8 +201,8 @@ class _ShowReponsesWidget extends State<ShowReponsesWidget> {
),
if(_questionsSubDTO != null && _questionsSubDTO.length > 1 && currentIndex != _questionsSubDTO.length && _questionsSubDTO[currentIndex-1].chosen != null && widget.questionsSubDTO!.length > 0)
Positioned(
top: kIsWeb ? size.height * 0.3 : size.height * 0.35, // TODO depends on screen' percentage
right: kIsWeb ? 45 : 60, // TODO depends on screen' percentage
top: kIsWeb ? size.height * 0.3 : size.height * 0.3, // size.height * 0.35 // TODO depends on screen' percentage
right: kIsWeb ? 45 : 45, // 60TODO depends on screen' percentage
child: InkWell(
onTap: () {
if(_questionsSubDTO[currentIndex-1].chosen != null && widget.questionsSubDTO!.length > 0) {
@ -220,15 +220,15 @@ class _ShowReponsesWidget extends State<ShowReponsesWidget> {
},
child: Icon(
Icons.chevron_right,
size: kIsWeb ? 100 : 150, // TODO depends on screen' percentage
size: kIsWeb ? 100 : 100, // 150 TODO depends on screen' percentage
color: kMainRed,
),
)
),
if(_questionsSubDTO != null && _questionsSubDTO.length > 1 && currentIndex != 1)
Positioned(
top: kIsWeb ? size.height * 0.3 : size.height * 0.35, // TODO depends on screen' percentage
left: kIsWeb ? 45 : 60, // TODO depends on screen' percentage
top: kIsWeb ? size.height * 0.3 : size.height * 0.3, // size.height * 0.35 TODO depends on screen' percentage
left: kIsWeb ? 45 : 45, // 60 TODO depends on screen' percentage
child: InkWell(
onTap: () {
if(currentIndex > 1)
@ -236,7 +236,7 @@ class _ShowReponsesWidget extends State<ShowReponsesWidget> {
},
child: Icon(
Icons.chevron_left,
size: kIsWeb ? 100 : 150, // TODO depends on screen' percentage
size: kIsWeb ? 100 : 100, // 150 TODO depends on screen' percentage
color: kMainRed,
),
)

View File

@ -22,13 +22,13 @@ class QuizzDTO {
List<QuestionDTO>? questions;
QuizzDTOBadLevel? badLevel;
LevelDTO? badLevel;
QuizzDTOBadLevel? mediumLevel;
LevelDTO? mediumLevel;
QuizzDTOBadLevel? goodLevel;
LevelDTO? goodLevel;
QuizzDTOBadLevel? greatLevel;
LevelDTO? greatLevel;
@override
bool operator ==(Object other) => identical(this, other) || other is QuizzDTO &&
@ -100,10 +100,10 @@ class QuizzDTO {
return QuizzDTO(
questions: QuestionDTO.listFromJson(json[r'questions']),
badLevel: QuizzDTOBadLevel.fromJson(json[r'bad_level']),
mediumLevel: QuizzDTOBadLevel.fromJson(json[r'medium_level']),
goodLevel: QuizzDTOBadLevel.fromJson(json[r'good_level']),
greatLevel: QuizzDTOBadLevel.fromJson(json[r'great_level']),
badLevel: LevelDTO.fromJson(json[r'bad_level']),
mediumLevel: LevelDTO.fromJson(json[r'medium_level']),
goodLevel: LevelDTO.fromJson(json[r'good_level']),
greatLevel: LevelDTO.fromJson(json[r'great_level']),
);
}
return null;

View File

@ -32,7 +32,7 @@ dependencies:
# Specific Web
google_maps_flutter_web: ^0.5.4+2 # Specific WEB
youtube_player_iframe: ^4.0.4 # Handle mobile and web here => TO TEST
youtube_player_iframe: ^5.0.0 # Handle mobile and web here => TO TEST
flare_flutter: ^3.0.2
provider: ^6.0.5