Flashcards revisited

These changes introduce several UI & UX improvements, bugfixes and new features.

---

Major changes:

• New question variant based on flashcards (like lecture and preparation questions)
• Flashcard variant can be added to custom sessions through feature activation
• Improve flashcard presentation in question carousels
  • front- and backside are placed in one visible element (backface-visibility)
  • front- and backside are configurable through style.scss
  • flashcard size is determined dynamically based on front- and backside dimensions
• Add smooth flip animation to flashcards (based on CSS3, not sencha)
• Add feature to flip all flashcard in one session (triggered by socket)
• Add import and export to ARSnova.cards

---

Other changes:

• visibility of speakers overlay buttons is not longer bound to projector mode. New condition: screen width > 840px
• configuration options for question carousels inner item width have been added to style.scss
• all labels and buttons in AudienceQuestionPanel and QuestionDetailsPanel have been customized for flashcards
• a new list button for new question variant "flashcard" has been added to both inclass panels
• question import and export modals have been completely overhauled for a consistent look and feel
• several UI & UX improvements

---

Bugfixes:

• CSV import has been fixed: Import failed if rateable questions without correct answers were inside CSV-file

• critical: fix layout problems in latest firefox release caused by senchas flexbox implementation

• Question and answer preview have been reintroduced for rateable question formats

• resolve several javascript reference errors

  ---

New configuration options:

/* carousel inner item width configuration */
$carousel-inner-max-width: 80%;  // was 720px previously

/** flashcard front side configuration **/
$flashcard-front-font-color: $brand-text;
$flashcard-front-background: linear-gradient(to top, #DFE8EC 0%, white 5%) 0 20px;
$flashcard-front-background-size: 100% 30px;
$flashcard-front-border-width: 5px;
$flashcard-front-border-color: white;
$flashcard-front-border-style: solid;

/** flashcard back side configuration **/
$flashcard-back-font-color: $brand-text;
$flashcard-back-background: linear-gradient(to top, #DFE8EC 0%, white 5%) 0 20px;
$flashcard-back-background-size: 100% 30px;
$flashcard-back-border-width: 5px;
$flashcard-back-border-color: white;
$flashcard-back-border-style: solid;

src/main/webapp/app/model/Session.js

@@ -89,6 +89,7 @@ Ext.define('ARSnova.model.Session', {
 		sessionLeave: "arsnova/session/leave",
 		learningProgressOptions: "arsnova/session/learningprogress/options",
 		learningProgressChange: "arsnova/session/learningprogress/change",
+		flipFlashcards: "arsnova/session/flashcards/flip",
 		featureChange: "arsnova/session/features/change"
 	},
 
@@ -105,6 +106,11 @@ Ext.define('ARSnova.model.Session', {
 			this.fireEvent(this.events.learningProgressChange);
 		}, this);
 
+		ARSnova.app.socket.on(ARSnova.app.socket.events.flipFlashcards, function (flip) {
+			ARSnova.app.getController('FlashcardQuestions').flipFlashcards(flip);
+			this.fireEvent(this.events.flipFlashcards, flip);
+		}, this);
+
 		ARSnova.app.socket.on(ARSnova.app.socket.events.featureChange, function (features) {
 			var prevFeatures = ARSnova.app.getController('Feature').getActiveFeatures();
 
@@ -175,6 +181,10 @@ Ext.define('ARSnova.model.Session', {
 		return this.getProxy().lockFeedbackInput(sessionStorage.getItem("keyword"), lock, callbacks);
 	},
 
+	flipFlashcards: function (flip, callbacks) {
+		return this.getProxy().flipFlashcards(sessionStorage.getItem("keyword"), flip, callbacks);
+	},
+
 	getMyLearningProgress: function (sessionKeyword, callbacks) {
 		var me = this;
 		return this.getProxy().getMyLearningProgress(sessionKeyword, this.getLearningProgress(), {