make non essential elements optional

backend/experiment/actions/playback.py

@@ -1,3 +1,5 @@
+from typing import List, Dict
+
 from .base_action import BaseAction
 
 # player types
@@ -127,9 +129,10 @@ class MatchingPairs(Multiplayer):
     play buttons are represented as cards
     '''
 
-    def __init__(self, sections, **kwargs):
+    def __init__(self, sections: List[Dict], display_score: str = 'large_top', **kwargs):
         super().__init__(sections, **kwargs)
         self.ID = TYPE_MATCHINGPAIRS
+        self.display_score = display_score
 
 
 class VisualMatchingPairs(MatchingPairs):

backend/experiment/rules/matching_pairs.py

@@ -16,6 +16,9 @@
 class MatchingPairsGame(Base):
     ID = 'MATCHING_PAIRS'
     num_pairs = 8
+    show_animation = True
+    display_score = 'top'
+    histogram_bars = 5
     contact_email = 'aml.tunetwins@gmail.com'
 
     def __init__(self):
@@ -110,7 +113,9 @@ def get_matching_pairs_trial(self, session):
         random.shuffle(player_sections)
         playback = MatchingPairs(
             sections=player_sections,
-            stop_audio_after=5
+            stop_audio_after=5,
+            show_animation=self.show_animation,
+            display_score=self.display_score
         )
         trial = Trial(
             title='Tune twins',

backend/experiment/tests/test_admin_experiment.py

@@ -74,8 +74,7 @@ def setUpTestData(cls):
         cls.participant = Participant.objects.create(unique_hash=42)
         cls.experiment = Experiment.objects.get(name='Hooked-China')
         for playlist in cls.experiment.playlists.all():
-            playlist.update_sections()            
-        print(cls.experiment.pk)
+            playlist.update_sections()
         cls.session = Session.objects.create(
             experiment=cls.experiment,
             participant=cls.participant,

frontend/src/components/PlayButton/PlayCard.js

@@ -4,15 +4,16 @@ import Histogram from "../Histogram/Histogram";
 import { VISUALMATCHINGPAIRS } from "components/Playback/Playback";
 import { API_ROOT } from "config";
 
-const PlayCard = ({ onClick, registerUserClicks, playing, section, view }) => {
-
+const PlayCard = ({ onClick, registerUserClicks, playing, section, view, showAnimation }) => {
     const getImgSrc = (url) => {
         if (url.startsWith("http")) {
             return url;
         }
         return API_ROOT + url;
     }
 
+    const histogramBars = showAnimation ? 5 : 0;
+
     return (
         <div
             data-testid="play-card"
@@ -43,7 +44,7 @@ const PlayCard = ({ onClick, registerUserClicks, playing, section, view }) => {
                     :
                     <Histogram
                         running={playing}
-                        bars={5}
+                        bars={histogramBars}
                         marginBottom={0}
                         backgroundColor="purple"
                         borderRadius=".5rem"

frontend/src/components/Playback/MatchingPairs.js

@@ -8,6 +8,8 @@ const MatchingPairs = ({
     sections,
     playerIndex,
     stopAudioAfter,
+    showAnimation,
+    displayScore,
     finishedPlaying,
     submitResult,
 }) => {
@@ -17,7 +19,8 @@ const MatchingPairs = ({
     const firstCard = useRef(-1);
     const secondCard = useRef(-1);
     const [total, setTotal] = useState(100);
-    const [message, setMessage] = useState('Pick a card')
+    const [message, setMessage] = useState('Pick a card');
+    const [turnFeedback, setTurnFeedback] = useState('');
     const [end, setEnd] = useState(false);
     const columnCount = sections.length > 6 ? 4 : 3;
 
@@ -53,26 +56,30 @@ const MatchingPairs = ({
             // update total score & display current score
             setTotal(total+score.current);
             setMessage(setScoreMessage(score.current));
+            setMessage(setScoreMessage(score.current));
             // show end of turn animations
-            switch (score.current) {
-                case 10:
-                    turnedCards[0].lucky = true;
-                    turnedCards[1].lucky = true;
-                    break;
-                case 20:
-                    turnedCards[0].memory = true;
-                    turnedCards[1].memory = true;
-                    break;
-                default:
-                    turnedCards[0].nomatch = true;
-                    turnedCards[1].nomatch = true;
-                    // reset nomatch cards for coming turns
-                    setTimeout(() => {
-                        turnedCards[0].nomatch = false;
-                        turnedCards[1].nomatch = false;
-                      }, 700);
-                    break;
+            if (showAnimation) {
+                switch (score.current) {                                       
+                    case 10:
+                        turnedCards[0].lucky = true;
+                        turnedCards[1].lucky = true;                                        
+                        break;
+                    case 20:
+                        turnedCards[0].memory = true;
+                        turnedCards[1].memory = true;                                        
+                        break;
+                    default:
+                        turnedCards[0].nomatch = true;
+                        turnedCards[1].nomatch = true;
+                        // reset nomatch cards for coming turns
+                        setTimeout(() => {
+                            turnedCards[0].nomatch = false;
+                            turnedCards[1].nomatch = false;                        
+                          }, 700);
+                        break;  
+                }   
             }
+
 
             // add third click event to finish the turn
             document.getElementById('root').addEventListener('click', finishTurn);
@@ -96,13 +103,16 @@ const MatchingPairs = ({
                 if (lastCard.group === currentCard.group) {
                     // match
                     if (currentCard.seen) {
-                        score.current = 20;
+                        score.current = 20;      
+                        setTurnFeedback('+1')
                     } else {
                         score.current = 10;
+                        setTurnFeedback('0')
                     }
                 } else {
                     if (currentCard.seen) { score.current = -10; }
                     else { score.current = 0; }
+                    setTurnFeedback('-1')
                 };
                 currentCard.seen = true;
                 lastCard.seen = true;
@@ -138,6 +148,7 @@ const MatchingPairs = ({
         // remove third click event
         document.getElementById('root').removeEventListener('click', finishTurn);
         score.current = undefined;
+        setTurnFeedback('');
         // Turn all cards back and enable events
         sections.forEach(section => section.turned = false);
         sections.forEach(section => section.noevents = false);
@@ -157,12 +168,12 @@ const MatchingPairs = ({
             <div className="row justify-content-around">
                 <div className="col-6 align-self-start">
                     <div dangerouslySetInnerHTML={{ __html: message }}
-                         className={classNames("matching-pairs__feedback", {fbnomatch: score.current === 0}, {fblucky: score.current === 10}, {fbmemory: score.current === 20}, {fbmisremembered: score.current === -10})}
-
+                         className={classNames("matching-pairs__feedback", { nomessage: displayScore === 'hidden' }, {fbnomatch: score.current === 0}, {fblucky: score.current === 10}, {fbmemory: score.current === 20}, {fbmisremembered: score.current === -10})}
+                        
                     />
                 </div>
                 <div className="col-6 align-self-end">
-                    <div className="matching-pairs__score">Score: <br />{total}</div>
+                    <div className={classNames("matching-pairs__score", { noscore: displayScore === 'hidden' } )}>Score: <br />{total}</div>        
                 </div>
             </div>
 
@@ -179,12 +190,15 @@ const MatchingPairs = ({
                         section={sections[index]}
                         onFinish={showFeedback}
                         stopAudioAfter={stopAudioAfter}
+                        showAnimation={showAnimation}
                     />
                 )
                 )}
             </div>
-        </div>
+            <div className={classNames("turnscore", { noturnscore: displayScore === 'hidden'})}>{turnFeedback}</div>
+        </div>  
     )
 }
 
 export default MatchingPairs;
+

frontend/src/components/Playback/MatchingPairs.scss

@@ -78,8 +78,24 @@
     &.fbmisremembered {
         color: $red;
     }
-}
+    &.nomessage {
+        opacity: 0;
+    }
+} 
 
 .matching-pairs__score {
     float: right;
+
+    &.noscore {
+        opacity: 0;
+    }
 }
+
+.turnscore {
+    position: fixed;
+    bottom: -2rem;
+    left: -2rem;
+    &.noturnscore {
+        opacity: 0;
+    }
+}

frontend/src/components/Playback/Playback.js

@@ -210,6 +210,8 @@ const Playback = ({
                     <MatchingPairs
                         {...attrs}
                         stopAudioAfter={playbackArgs.stop_audio_after}
+                        showAnimation={playbackArgs.show_animation}
+                        displayScore={playbackArgs.display_score}
                     />
                 );
             case VISUALMATCHINGPAIRS: