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/controller/QuestionExport.js

@@ -116,8 +116,7 @@ Ext.define("ARSnova.controller.QuestionExport", {
 		return questions;
 	},
 
-	saveFileOnFileSystem: function (csv, filename) {
-		var blob = new Blob([csv], {type: "application/csv;charset=utf-8"});
+	makeAndClickDownloadLink: function (blob, filename) {
 		var ua = window.navigator.userAgent;
 		var msie = ua.indexOf("MSIE ");
 
@@ -133,6 +132,13 @@ Ext.define("ARSnova.controller.QuestionExport", {
 			document.body.appendChild(a);
 			a.click();
 		}
+	},
+
+	saveFileOnFileSystem: function (csv, filename) {
+		var blob = new Blob([csv], {type: "application/csv;charset=utf-8"});
+
+		this.makeAndClickDownloadLink(blob, filename);
+
 		var hTP = ARSnova.app.mainTabPanel.tabPanel.homeTabPanel;
 		hTP.animateActiveItem(hTP.mySessionsPanel, {
 			type: 'slide',
@@ -141,10 +147,80 @@ Ext.define("ARSnova.controller.QuestionExport", {
 		});
 	},
 
+	saveClickQuestionOnFileSystem: function (questionObj) {
+		var rawJson = JSON.stringify(questionObj);
+		var blob = new Blob([rawJson], {type: "text/plain;charset=utf-8"});
+		this.makeAndClickDownloadLink(blob, "ARSnovaClickQuestion");
+	},
+
 	parseJsonToCsv: function (records) {
 		var preparsedQuestion = this.preparseJsontoCsv(records);
 		var csv = ARSnova.utils.CsvUtil.jsonToCsv(preparsedQuestion);
 		this.saveFileOnFileSystem(csv, this.filename());
-	}
+	},
 
+	parseAnswerOptionsForClick: function (answerOptions, questionType) {
+		var clickAnswerOptions = [];
+		for (var i = 0; i < answerOptions.length; i++) {
+			clickAnswerOptions.push({
+				hashtag: "ImportFromARSnova",
+				questionIndex: 0,
+				answerText: answerOptions[i].text,
+				answerOptionNumber: i,
+				isCorrect: answerOptions[i].correct,
+				type: "DefaultAnswerOption"
+			});
+		}
+		return clickAnswerOptions;
+	},
+
+	exportQuestionToClick: function (question) {
+		var clickQuestion = {
+			hashtag: "ImportFromARSnova",
+			questionText: question.subject + "\\n" + question.text,
+			timer: 20,
+			startTime: 0,
+			questionIndex: 0,
+			answerOptionList: this.parseAnswerOptionsForClick(question.possibleAnswers, question.questionType)
+		};
+		switch (question.questionType) {
+			case "yesno":
+				clickQuestion.type = "YesNoSingleChoiceQuestion";
+				break;
+			case "school":
+			case "vote":
+				clickQuestion.type = "SurveyQuestion";
+				break;
+			case "mc":
+				clickQuestion.type = "MultipleChoiceQuestion";
+				break;
+			case "sc":
+			case "abcd":
+				clickQuestion.type = "SingleChoiceQuestion";
+				break;
+		}
+		var session = {
+			hashtag: "ImportFromARSnova",
+			questionList: [clickQuestion],
+			type: "DefaultQuestionGroup",
+			configuration: {
+				hashtag: "ImportFromARSnova",
+				music: {
+					hashtag: "Hashtag",
+					isEnabled: 0,
+					title: "Song1",
+					volume: 80
+				},
+				theme: "theme-blackbeauty",
+				nicks: {
+					hashtag: "ImportFromARSnova",
+					blockIllegal: true,
+					selectedValues: [],
+					restrictToCASLogin: false
+				},
+				readingConfirmationEnabled: false
+			}
+		};
+		return session;
+	}
 });