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/view/speaker/QuestionStatisticChart.js

@@ -154,9 +154,8 @@ Ext.define('ARSnova.view.speaker.QuestionStatisticChart', {
 			docked: 'top',
 			ui: 'light',
 			title: Ext.util.Format.htmlEncode(this.questionObj.subject),
-			items: [
-				this.backButton,
-				this.answerCounter, {
+			items: [this.backButton, 
+			        this.answerCounter, {
 				xtype: 'button',
 				align: 'right',
 				iconCls: 'icon-check',
@@ -165,7 +164,36 @@ Ext.define('ARSnova.view.speaker.QuestionStatisticChart', {
 				handler: this.toggleCorrectHandler,
 				hidden: !hasCorrectAnswers() || this.questionObj.questionType === 'grid' ||
 					(ARSnova.app.userRole === ARSnova.app.USER_ROLE_STUDENT && !this.questionObj.showAnswer)
-			}]
+				},{
+				xtype: 'button',
+				text: Messages.QUESTIONS_CSV_EXPORT_ANSWERS_BUTTON,
+				align: 'right',
+				handler: function(){
+					//Format
+					var exp="data:text/csv;charset=utf-8,";
+					//Subeject and Question
+					exp+=Messages.QUESTION_SUBJECT+": "+me.questionObj.subject+";"+Messages.QUESTION+": "+me.questionObj.text;
+					//Table header
+					exp+="\n"+Messages.ANSWERS+";"
+						+Messages.FIRST_ROUND+" "+Messages.GRID_LABEL_RELATIVE+";"+Messages.FIRST_ROUND+" "+Messages.GRID_LABEL_ABSOLUTE+";"
+						+Messages.SECOND_ROUND+" "+Messages.GRID_LABEL_RELATIVE+";"+Messages.SECOND_ROUND+" "+Messages.GRID_LABEL_ABSOLUTE;
+					//Table contents (answers)
+					me.questionStore.each(function (record) {
+						exp+="\n"+record.get('text')+";"+record.get('percent-round1')+";"+record.get('value-round1')+";"+record.get('percent-round2')+";"+record.get('value-round2');
+					});
+
+					//Download file
+					//stackoverflow.com/questions/14964035/
+					var encodedUri = encodeURI(exp);
+					var link = document.createElement("a");
+					link.setAttribute("href", encodedUri);
+					link.setAttribute("download", me.questionObj.subject+"_"+me.questionObj.text+"-Answers.csv");
+					document.body.appendChild(link); // Required for FF
+					link.click(); 
+				},
+				hidden: (ARSnova.app.userRole === ARSnova.app.USER_ROLE_STUDENT||me.questionObj.questionType==='grid')
+				}
+			]
 		});
 
 		this.piToolbar = Ext.create('Ext.Toolbar', {
@@ -981,4 +1009,4 @@ Ext.define('ARSnova.view.speaker.QuestionStatisticChart', {
 
 		return lighterColors;
 	}
-});
+});
\ No newline at end of file