From 1c5243e59425b05de1867be4417040187ca13c8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20G=C3=A4rtner?= <andreas.gaertner@mni.thm.de>
Date: Thu, 6 Oct 2016 15:56:46 +0200
Subject: [PATCH] Add button for flashcard flip and apply ui improvements for
fc use case
---
src/main/webapp/app/controller/Feature.js | 12 ------
src/main/webapp/app/internationalization.js | 8 +++-
src/main/webapp/app/view/CustomCarousel.js | 2 +-
src/main/webapp/app/view/Question.js | 29 ++++++-------
.../app/view/speaker/AudienceQuestionPanel.js | 42 +++++++++++++++++--
src/main/webapp/app/view/speaker/InClass.js | 16 ++++++-
.../app/view/speaker/QuestionDetailsPanel.js | 2 +
.../app/view/speaker/ShowcaseEditButtons.js | 20 ++++++++-
.../app/view/speaker/ShowcaseQuestionPanel.js | 6 ++-
9 files changed, 99 insertions(+), 38 deletions(-)
diff --git a/src/main/webapp/app/controller/Feature.js b/src/main/webapp/app/controller/Feature.js
index c9f442127..e1e202ed3 100644
--- a/src/main/webapp/app/controller/Feature.js
+++ b/src/main/webapp/app/controller/Feature.js
@@ -399,18 +399,6 @@ Ext.define("ARSnova.controller.Feature", {
inClass.createAdHocQuestionButton.setHidden(!hasQuestionFeatures);
inClass.feedbackQuestionButton.setText(inClass.feedbackQuestionButton.initialConfig.text);
inClass.updateActionButtonElements();
-
- if (features.jitt && !features.lecture) {
- tabPanel.showcaseQuestionPanel.setPreparationMode();
- tabPanel.newQuestionPanel.setVariant('preparation');
- } else if (features.flashcardFeature) {
- tabPanel.showcaseQuestionPanel.setFlashcardMode();
- tabPanel.newQuestionPanel.setVariant('flashcard');
- } else {
- tabPanel.showcaseQuestionPanel.setLectureMode();
- tabPanel.newQuestionPanel.setVariant('lecture');
- }
-
inClass.changeActionButtonsMode(features);
} else {
// hide questionsPanel tab when session has no question features active
diff --git a/src/main/webapp/app/internationalization.js b/src/main/webapp/app/internationalization.js
index 0d2422873..ffcd5ef57 100755
--- a/src/main/webapp/app/internationalization.js
+++ b/src/main/webapp/app/internationalization.js
@@ -328,8 +328,8 @@
PREPARATION: "Vorbereitung",
LECTURE: "Hörsaal",
RESET_ALL_ANSWERS: "Alle Antworten zurücksetzen",
- SHOW_FLASHCARD_ANSWER: "Antwort anzeigen",
- HIDE_FLASHCARD_ANSWER: "Antwort ausblenden",
+ SHOW_FLASHCARD_ANSWER: "Rückseite anzeigen",
+ HIDE_FLASHCARD_ANSWER: "Vorderseite anzeigen",
IMAGE_NEEDED: "Es soll ein Bild als Antwort hochgeladen werden",
COMPRESSING_MASK: "Ihr Bild wird komprimiert...",
PICTURE_RIGHT_INFORMATION: ['Bitte beachten Sie, dass Sie keine Bilder verwenden, für deren Verwendung Sie keine Rechte haben (Urheberrechtsgesetz) oder die pornografische oder volksverhetzende (§130 StGB) Inhalte zeigen.\n',
@@ -705,6 +705,8 @@
DELETE_FLASHCARD_VIEWS: "Ansichten<br/>löschen",
RELEASE_FLASHCARD: "Lernkarte<br/>freigeben",
RELEASE_FLASHCARDS: "Lernkarten<br/>freigeben",
+ FLIP_FLASHCARDS_SHORT: "Lernkarten<br/>umdrehen",
+ FLIP_FLASHCARDS: "Alle Lernkarten<br/>umdrehen",
/* about */
MANUAL: "Anleitung",
@@ -1565,6 +1567,8 @@
DELETE_FLASHCARD_VIEWS: "Delete<br/>views",
RELEASE_FLASHCARD: "Release<br/>flashcard",
RELEASE_FLASHCARDS: "Release<br/>flashcards",
+ FLIP_FLASHCARDS_SHORT: "Flip all<br/>flashcards",
+ FLIP_FLASHCARDS: "Flip all<br/>flashcards",
/* about */
MANUAL: "Manual",
diff --git a/src/main/webapp/app/view/CustomCarousel.js b/src/main/webapp/app/view/CustomCarousel.js
index ffd525631..00def0de3 100755
--- a/src/main/webapp/app/view/CustomCarousel.js
+++ b/src/main/webapp/app/view/CustomCarousel.js
@@ -47,7 +47,7 @@ Ext.define('ARSnova.view.CustomCarousel', {
this.getIndicator().element.dom.style.bottom = "";
this.on('add', function (carousel, item, index) {
- if (item.getActiveItem()) {
+ if (item.xtype === 'panel' && item.getActiveItem) {
item.getActiveItem().setStyle('margin-top: 56px');
}
});
diff --git a/src/main/webapp/app/view/Question.js b/src/main/webapp/app/view/Question.js
index 9289a8aa1..11a949b8e 100755
--- a/src/main/webapp/app/view/Question.js
+++ b/src/main/webapp/app/view/Question.js
@@ -149,9 +149,15 @@ Ext.define('ARSnova.view.Question', {
}
if (ARSnova.app.userRole === ARSnova.app.USER_ROLE_SPEAKER) {
+ var tabPanel = ARSnova.app.mainTabPanel.tabPanel.speakerTabPanel;
+ var showcasePanel = tabPanel.showcaseQuestionPanel;
this.editButtons = Ext.create('ARSnova.view.speaker.ShowcaseEditButtons', {
questionObj: this.questionObj,
- buttonClass: 'smallerActionButton'
+ buttonClass: 'smallerActionButton',
+ hideFlipFlashcardButton:
+ this.questionObj.questionType !== 'flashcard' ||
+ this.questionObj.questionType === 'flashcard' &&
+ showcasePanel.getMode() !== 'flashcard'
});
this.on('painted', function () {
@@ -500,24 +506,17 @@ Ext.define('ARSnova.view.Question', {
this.questionPanel.addCls('front');
this.answerPanel.addCls('back');
- if (this.questionObj.fcImage) {
- this.flashcardGrid = Ext.create('ARSnova.view.components.GridImageContainer', {
- editable: false,
- gridIsHidden: true,
- style: 'margin-bottom: 20px'
- });
- me.flashcardGrid.prepareRemoteImage(me.questionObj, true);
- this.questionContainer.add(this.flashcardGrid);
+ if (ARSnova.app.getController('FlashcardQuestions').flip) {
+ this.questionContainer.addCls('flipped');
}
this.questionContainer.add(this.answerPanel);
this.answerPanel.setContent(this.questionObj.possibleAnswers[0].text, true, true);
-
- this.formPanel.add([{
- xtype: 'button',
+ this.flashcardToggleButton = Ext.create('Ext.Button', {
cls: 'saveButton centered',
ui: 'confirm',
- text: Messages.SHOW_FLASHCARD_ANSWER,
+ text: ARSnova.app.getController('FlashcardQuestions').flip ?
+ Messages.HIDE_FLASHCARD_ANSWER : Messages.SHOW_FLASHCARD_ANSWER,
handler: function (button) {
if (!this.questionContainer.isFlipped) {
this.questionContainer.isFlipped = true;
@@ -542,7 +541,9 @@ Ext.define('ARSnova.view.Question', {
}
},
scope: this
- }]);
+ });
+
+ this.formPanel.add([this.flashcardToggleButton]);
},
saveAnswer: function (answer) {
diff --git a/src/main/webapp/app/view/speaker/AudienceQuestionPanel.js b/src/main/webapp/app/view/speaker/AudienceQuestionPanel.js
index 1ada2426e..fb7106486 100644
--- a/src/main/webapp/app/view/speaker/AudienceQuestionPanel.js
+++ b/src/main/webapp/app/view/speaker/AudienceQuestionPanel.js
@@ -189,6 +189,34 @@ Ext.define('ARSnova.view.speaker.AudienceQuestionPanel', {
hidden: true
});
+ this.flipFlashcardsButton = Ext.create('ARSnova.view.MatrixButton', {
+ text: actionButtonCls === 'smallerActionButton' ?
+ Messages.FLIP_FLASHCARDS_SHORT :
+ Messages.FLIP_FLASHCARDS,
+ cls: actionButtonCls,
+ imageCls: 'icon-flashcard-front',
+ ctrl: ARSnova.app.getController('FlashcardQuestions'),
+ flip: function () {
+ var button = self.flipFlashcardsButton;
+ if (button.config.ctrl.flip) {
+ button.element.down('.iconBtnImg').replaceCls(
+ 'icon-flashcard-front', 'icon-flashcard-back');
+ } else {
+ button.element.down('.iconBtnImg').replaceCls(
+ 'icon-flashcard-back', 'icon-flashcard-front');
+ }
+ },
+ handler: function (button) {
+ var flip = button.config.ctrl.flip;
+ ARSnova.app.sessionModel.flipFlashcards(!flip, {
+ success: function (response) {
+ button.config.flip();
+ },
+ failure: function (response) {}
+ });
+ }
+ });
+
this.newQuestionButton = Ext.create('ARSnova.view.MatrixButton', {
text: Messages.NEW_QUESTION,
buttonConfig: 'icon',
@@ -530,6 +558,8 @@ Ext.define('ARSnova.view.speaker.AudienceQuestionPanel', {
if (this.getVariant() !== 'flashcard') {
this.voteStatusButton.checkInitialStatus();
+ this.questionStatusButton.checkInitialStatus();
+ this.questionStatusButton.show();
this.voteStatusButton.show();
if (features.slides) {
@@ -544,8 +574,6 @@ Ext.define('ARSnova.view.speaker.AudienceQuestionPanel', {
this.showcaseActionButton.show();
this.questionListContainer.show();
this.questionList.show();
- this.questionStatusButton.checkInitialStatus();
- this.questionStatusButton.show();
// this.sortQuestionsButton.show();
this.deleteQuestionsButton.show();
@@ -717,7 +745,6 @@ Ext.define('ARSnova.view.speaker.AudienceQuestionPanel', {
this.questionStatusButton.setKeynoteWording();
this.newQuestionButton.element.down('.iconBtnImg').replaceCls('icon-question', 'icon-pencil');
this.voteStatusButton.setKeynoteWording();
- this.voteStatusButton.show();
captionTranslation = {
active: Messages.OPEN_CONTENT,
@@ -735,7 +762,6 @@ Ext.define('ARSnova.view.speaker.AudienceQuestionPanel', {
this.questionStatusButton.setDefaultWording();
this.newQuestionButton.element.down('.iconBtnImg').replaceCls('icon-pencil', 'icon-question');
this.voteStatusButton.setDefaultWording();
- this.voteStatusButton.show();
}
if (this.getVariant() === 'flashcard') {
@@ -751,6 +777,9 @@ Ext.define('ARSnova.view.speaker.AudienceQuestionPanel', {
this.questionStatusButton.setFlashcardsWording();
this.newQuestionButton.element.down('.iconBtnImg').replaceCls('icon-question', 'icon-pencil');
+ this.actionButtonPanel.remove(this.questionStatusButton, false);
+ this.actionButtonPanel.insert(0, this.flipFlashcardsButton);
+ this.flipFlashcardsButton.config.flip();
captionTranslation = {
active: Messages.OPEN_CONTENT,
@@ -766,6 +795,9 @@ Ext.define('ARSnova.view.speaker.AudienceQuestionPanel', {
};
} else {
this.flashcardImportButton.hide();
+ this.actionButtonPanel.remove(this.flipFlashcardsButton, false);
+ this.actionButtonPanel.insert(0, this.questionStatusButton);
+ this.voteStatusButton.show();
}
this.toolbar.setTitle(toolbarTitle);
@@ -777,5 +809,7 @@ Ext.define('ARSnova.view.speaker.AudienceQuestionPanel', {
this.questionsImport.setButtonText(importText);
this.caption.setTranslation(captionTranslation);
this.caption.setBadgeTranslation(badgeTranslation);
+ this.questionStatusButton.setHidden(this.getVariant() === 'flashcard');
+ ARSnova.app.mainTabPanel.tabPanel.speakerTabPanel.showcaseQuestionPanel.setMode(this.getVariant());
}
});
diff --git a/src/main/webapp/app/view/speaker/InClass.js b/src/main/webapp/app/view/speaker/InClass.js
index 6128b2fad..cf5b2bd40 100644
--- a/src/main/webapp/app/view/speaker/InClass.js
+++ b/src/main/webapp/app/view/speaker/InClass.js
@@ -358,7 +358,7 @@ Ext.define('ARSnova.view.speaker.InClass', {
this.showcaseActionButton.setButtonText(this.showcaseActionButton.config.altText);
this.createAdHocQuestionButton.setButtonText(this.createAdHocQuestionButton.config.altText);
this.showcaseActionButton.setHandler(this.showcaseHandler);
- } else if (features.flashcard) {
+ } else if (features.flashcardFeature) {
sTP.showcaseQuestionPanel.setFlashcardMode();
this.createAdHocQuestionButton.config.mode = 'flashcard';
this.showcaseActionButton.setHandler(this.showcaseHandler);
@@ -563,7 +563,7 @@ Ext.define('ARSnova.view.speaker.InClass', {
success: function (response) {
var numFlashcards = parseInt(response.responseText);
- if (!features.jitt && !features.lecture && features.flashcard) {
+ if (!features.jitt && !features.lecture && features.flashcardFeature) {
if (numFlashcards === 1) {
me.showcaseActionButton.setButtonText(Messages.SHOWCASE_FLASHCARD);
} else {
@@ -645,6 +645,7 @@ Ext.define('ARSnova.view.speaker.InClass', {
applyUIChanges: function (features) {
var lectureButtonText = Messages.LECTURE_QUESTIONS_LONG;
var adHocIconEl = this.createAdHocQuestionButton.element.down('.iconBtnImg');
+ var tabPanel = ARSnova.app.mainTabPanel.tabPanel.speakerTabPanel;
this.courseLearningProgressButton.setText(
features.peerGrading ? Messages.EVALUATION_ALT : Messages.COURSES_LEARNING_PROGRESS
@@ -656,6 +657,17 @@ Ext.define('ARSnova.view.speaker.InClass', {
adHocIconEl.replaceCls('icon-pencil', 'icon-question');
}
+ if (features.jitt && !features.lecture) {
+ tabPanel.showcaseQuestionPanel.setPreparationMode();
+ tabPanel.newQuestionPanel.setVariant('preparation');
+ } else if (features.flashcardFeature && !features.lecture) {
+ tabPanel.showcaseQuestionPanel.setFlashcardMode();
+ tabPanel.newQuestionPanel.setVariant('flashcard');
+ } else {
+ tabPanel.showcaseQuestionPanel.setLectureMode();
+ tabPanel.newQuestionPanel.setVariant('lecture');
+ }
+
if (features.total || features.slides) {
lectureButtonText = Messages.SLIDE_LONG;
this.caption.setBadgeTranslation({
diff --git a/src/main/webapp/app/view/speaker/QuestionDetailsPanel.js b/src/main/webapp/app/view/speaker/QuestionDetailsPanel.js
index 4fdcc0300..d05c81897 100644
--- a/src/main/webapp/app/view/speaker/QuestionDetailsPanel.js
+++ b/src/main/webapp/app/view/speaker/QuestionDetailsPanel.js
@@ -1574,6 +1574,7 @@ Ext.define('ARSnova.view.speaker.QuestionDetailsPanel', {
applyUIChanges: function () {
if (this.isSlide) {
this.toolbar.setTitle(Messages.SLIDE);
+ this.questionStatusButton.setHidden(false);
this.statisticButton.setButtonText(Messages.SHOW_COMMENTS);
this.deleteAnswersButton.setButtonText(Messages.DELETE_COMMENTS);
this.deleteQuestionButton.setButtonText(Messages.DELETE_SLIDE);
@@ -1582,6 +1583,7 @@ Ext.define('ARSnova.view.speaker.QuestionDetailsPanel', {
if (this.isFlashcard) {
this.toolbar.setTitle(Messages.FLASHCARD);
+ this.questionStatusButton.setHidden(true);
this.deleteQuestionButton.setButtonText(Messages.DELETE_FLASHCARD);
this.deleteAnswersButton.setButtonText(Messages.DELETE_FLASHCARD_VIEWS);
}
diff --git a/src/main/webapp/app/view/speaker/ShowcaseEditButtons.js b/src/main/webapp/app/view/speaker/ShowcaseEditButtons.js
index 38ae4daa4..4b656631f 100755
--- a/src/main/webapp/app/view/speaker/ShowcaseEditButtons.js
+++ b/src/main/webapp/app/view/speaker/ShowcaseEditButtons.js
@@ -27,7 +27,8 @@ Ext.define('ARSnova.view.speaker.ShowcaseEditButtons', {
pack: 'center'
},
- buttonClass: ''
+ buttonClass: '',
+ hideFlipFlashcardButton: true
},
initialize: function () {
@@ -143,6 +144,21 @@ Ext.define('ARSnova.view.speaker.ShowcaseEditButtons', {
}
});
+ this.flipFlashcardsButton = Ext.create('ARSnova.view.MatrixButton', {
+ text: Messages.FLIP_FLASHCARDS,
+ cls: 'actionButton',
+ hidden: this.config.hideFlipFlashcardButton,
+ imageCls: ARSnova.app.getController('FlashcardQuestions').flip ?
+ 'icon-flashcard-back' : 'icon-flashcard-front',
+ handler: function (button) {
+ var ctrl = ARSnova.app.getController('FlashcardQuestions');
+ ARSnova.app.sessionModel.flipFlashcards(!ctrl.flip, {
+ success: function (response) {},
+ failure: function (response) {}
+ });
+ }
+ });
+
this.statusButton = Ext.create('ARSnova.view.QuestionStatusButton', {
cls: this.config.buttonClass,
questionObj: this.questionObj,
@@ -162,7 +178,7 @@ Ext.define('ARSnova.view.speaker.ShowcaseEditButtons', {
components = [{
xtype: 'panel',
layout: this.config.layoutTemplate,
- items: [this.statusButton]
+ items: [this.flipFlashcardsButton]
}];
} else {
components = this.twoRows ?
diff --git a/src/main/webapp/app/view/speaker/ShowcaseQuestionPanel.js b/src/main/webapp/app/view/speaker/ShowcaseQuestionPanel.js
index 7360b863d..0865e1ad8 100755
--- a/src/main/webapp/app/view/speaker/ShowcaseQuestionPanel.js
+++ b/src/main/webapp/app/view/speaker/ShowcaseQuestionPanel.js
@@ -37,7 +37,8 @@ Ext.define('ARSnova.view.speaker.ShowcaseQuestionPanel', {
controller: null,
questionTitleLong: Messages.LECTURE_QUESTION_LONG,
- questionTitleShort: Messages.LECTURE_QUESTIONS
+ questionTitleShort: Messages.LECTURE_QUESTIONS,
+ mode: 'lecture'
},
updateClockTask: {
@@ -352,17 +353,20 @@ Ext.define('ARSnova.view.speaker.ShowcaseQuestionPanel', {
this.setController(ARSnova.app.getController('Questions'));
this.setQuestionTitleLong(Messages.LECTURE_QUESTION_LONG);
this.setQuestionTitleShort(Messages.LECTURE_QUESTIONS);
+ this.setMode('lecture');
},
setPreparationMode: function () {
this.setController(ARSnova.app.getController('PreparationQuestions'));
this.setQuestionTitleLong(Messages.PREPARATION_QUESTION_LONG);
this.setQuestionTitleShort(Messages.PREPARATION_QUESTION_SHORT);
+ this.setMode('preparation');
},
setFlashcardMode: function () {
this.setController(ARSnova.app.getController('FlashcardQuestions'));
this.setQuestionTitleLong(Messages.FLASHCARD);
this.setQuestionTitleShort(Messages.FLASHCARD_SHORT);
+ this.setMode('flashcard');
}
});
--
GitLab