Skip to content

Commit e8e62ae

Browse files
computationalcorecomputationalcore
committed
feat: Add answers status sound and animations
1 parent 2b71152 commit e8e62ae

File tree

13 files changed

+273
-26
lines changed

13 files changed

+273
-26
lines changed

‎assets/animations/101-x-pop.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"v":"4.5.9","fr":60,"ip":0,"op":120,"w":300,"h":300,"ddd":0,"assets":[],"layers":[{"ddd":0,"ind":0,"ty":4,"nm":"smallCircle5","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":1,"s":[133.426,147.301,0],"e":[69.676,167.301,0],"to":[-10.625,3.33333325386047,0],"ti":[10.625,-3.33333325386047,0]},{"t":12}]},"a":{"a":0,"k":[-32.449,76.551,0]},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":8,"s":[100,100,100],"e":[0,0,100]},{"t":17}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[7.102,7.102]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":0,"k":[0.94,0.166,0.692,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-32.449,76.551],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"mn":"ADBE Vector Group"}],"ip":0,"op":120,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":1,"ty":4,"nm":"smallCircle4","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":1,"s":[144.676,133.926,0],"e":[118.926,69.926,0],"to":[-4.29166650772095,-10.6666669845581,0],"ti":[4.29166650772095,10.6666669845581,0]},{"t":12}]},"a":{"a":0,"k":[-32.449,76.551,0]},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":8,"s":[100,100,100],"e":[0,0,100]},{"t":17}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[7.102,7.102]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":0,"k":[0.94,0.166,0.692,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-32.449,76.551],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"mn":"ADBE Vector Group"}],"ip":0,"op":120,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":2,"ty":4,"nm":"smallCircle3","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":1,"s":[159.551,138.051,0],"e":[218.801,76.551,0],"to":[9.875,-10.25,0],"ti":[-9.875,10.25,0]},{"t":12}]},"a":{"a":0,"k":[-32.449,76.551,0]},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":8,"s":[100,100,100],"e":[0,0,100]},{"t":17}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[7.102,7.102]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":0,"k":[0.94,0.166,0.692,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-32.449,76.551],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"mn":"ADBE Vector Group"}],"ip":0,"op":120,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":3,"ty":4,"nm":"smallCircle2","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":1,"s":[156.926,162.301,0],"e":[230.176,204.301,0],"to":[12.2083330154419,7,0],"ti":[-12.2083330154419,-7,0]},{"t":12}]},"a":{"a":0,"k":[-32.449,76.551,0]},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":8,"s":[100,100,100],"e":[0,0,100]},{"t":17}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[7.102,7.102]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":0,"k":[0.94,0.166,0.692,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-32.449,76.551],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"mn":"ADBE Vector Group"}],"ip":0,"op":120,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":4,"ty":4,"nm":"smallCircle1","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":1,"s":[142.301,162.676,0],"e":[131.301,249.176,0],"to":[-1.83333337306976,14.4166669845581,0],"ti":[1.83333337306976,-14.4166669845581,0]},{"t":12}]},"a":{"a":0,"k":[-32.449,76.551,0]},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":8,"s":[100,100,100],"e":[0,0,100]},{"t":17}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[7.102,7.102]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":0,"k":[0.94,0.166,0.692,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-32.449,76.551],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"mn":"ADBE Vector Group"}],"ip":0,"op":120,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":5,"ty":4,"nm":"bigCircle5","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":1,"s":[136.6,141.6,0],"e":[66.1,185.85,0],"to":[-11.75,7.375,0],"ti":[11.75,-7.375,0]},{"t":12}]},"a":{"a":0,"k":[-72.275,38.725,0]},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":8,"s":[100,100,100],"e":[0,0,100]},{"t":17}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[3.449,3.449]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":0,"k":[0.908,0.059,0.259,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-72.275,38.725],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[292.94,292.94],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"mn":"ADBE Vector Group"}],"ip":0,"op":120,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":6,"ty":4,"nm":"bigCircle4","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":1,"s":[164.1,140.1,0],"e":[199.85,89.35,0],"to":[5.95833349227905,-8.45833301544189,0],"ti":[-5.95833349227905,8.45833301544189,0]},{"t":12}]},"a":{"a":0,"k":[-72.275,38.725,0]},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":8,"s":[100,100,100],"e":[0,0,100]},{"t":17}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[3.449,3.449]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":0,"k":[0.908,0.059,0.259,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-72.275,38.725],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[292.94,292.94],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"mn":"ADBE Vector Group"}],"ip":0,"op":120,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":7,"ty":4,"nm":"bigCircle3","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":1,"s":[146.225,132.1,0],"e":[122.975,84.35,0],"to":[-3.875,-7.95833349227905,0],"ti":[3.875,7.95833349227905,0]},{"t":12}]},"a":{"a":0,"k":[-72.275,38.725,0]},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":8,"s":[100,100,100],"e":[0,0,100]},{"t":17}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[3.449,3.449]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":0,"k":[0.908,0.059,0.259,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-72.275,38.725],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[292.94,292.94],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"mn":"ADBE Vector Group"}],"ip":0,"op":120,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":8,"ty":4,"nm":"bigCircle2","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":1,"s":[162.85,157.475,0],"e":[216.1,188.725,0],"to":[8.875,5.20833349227905,0],"ti":[-8.875,-5.20833349227905,0]},{"t":12}]},"a":{"a":0,"k":[-72.275,38.725,0]},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":8,"s":[100,100,100],"e":[0,0,100]},{"t":17}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[3.449,3.449]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":0,"k":[0.908,0.059,0.259,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-72.275,38.725],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[292.94,292.94],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"mn":"ADBE Vector Group"}],"ip":0,"op":120,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":9,"ty":4,"nm":"bigCircle1","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":1,"s":[139.475,156.85,0],"e":[123.475,221.1,0],"to":[-2.66666674613953,10.7083330154419,0],"ti":[2.66666674613953,-10.7083330154419,0]},{"t":12}]},"a":{"a":0,"k":[-72.275,38.725,0]},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":8,"s":[100,100,100],"e":[0,0,100]},{"t":17}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[3.449,3.449]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":0,"k":[0.908,0.059,0.259,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-72.275,38.725],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[292.94,292.94],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"mn":"ADBE Vector Group"}],"ip":0,"op":120,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":10,"ty":4,"nm":"check","ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":1,"s":[0],"e":[100]},{"t":18}]},"r":{"a":1,"k":[{"i":{"x":[0.66],"y":[2.045]},"o":{"x":[0.167],"y":[0.167]},"n":["0p66_2p045_0p167_0p167"],"t":1,"s":[-164],"e":[0]},{"i":{"x":[0.074],"y":[0.984]},"o":{"x":[0],"y":[0]},"n":["0p074_0p984_0_0"],"t":18,"s":[0],"e":[-36.525]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.666],"y":[-0.009]},"n":["0p833_1_0p666_-0p009"],"t":23,"s":[-36.525],"e":[18.356]},{"i":{"x":[0.57],"y":[0.989]},"o":{"x":[0.167],"y":[0]},"n":["0p57_0p989_0p167_0"],"t":29,"s":[18.356],"e":[-13.643]},{"i":{"x":[0.57],"y":[1.046]},"o":{"x":[0.427],"y":[-0.031]},"n":["0p57_1p046_0p427_-0p031"],"t":34,"s":[-13.643],"e":[0]},{"t":40}]},"p":{"a":0,"k":[150,150,0]},"a":{"a":0,"k":[-5.5,-5.5,0]},"s":{"a":1,"k":[{"i":{"x":[0.842,0.842,0.833],"y":[1.621,1.621,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p842_1p621_0p167_0p167","0p842_1p621_0p167_0p167","0p833_0p833_0p167_0p167"],"t":1,"s":[30,30,100],"e":[100,100,100]},{"i":{"x":[0.349,0.349,0.833],"y":[1.018,1.018,0.833]},"o":{"x":[0,0,0],"y":[0,0,0]},"n":["0p349_1p018_0_0","0p349_1p018_0_0","0p833_0p833_0_0"],"t":18,"s":[100,100,100],"e":[92.786,92.786,100]},{"i":{"x":[0.783,0.783,0.833],"y":[2.448,2.448,0.833]},"o":{"x":[0.671,0.671,0.167],"y":[0.024,0.024,0.167]},"n":["0p783_2p448_0p671_0p024","0p783_2p448_0p671_0p024","0p833_0p833_0p167_0p167"],"t":25,"s":[92.786,92.786,100],"e":[100,100,100]},{"t":34}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-55,-49],[25.5,52]],"c":false}},"nm":"Path 1","mn":"ADBE Vector Shape - Group"},{"ty":"st","c":{"a":0,"k":[0.799,0.158,0.158,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":20},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 2","np":3,"mn":"ADBE Vector Group"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-55,51],[-15.5,5.5],[25,-50.5]],"c":false}},"nm":"Path 1","mn":"ADBE Vector Shape - Group"},{"ty":"st","c":{"a":0,"k":[0.799,0.158,0.158,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":20},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"mn":"ADBE Vector Group"}],"ip":0,"op":120,"st":0,"bm":0,"sr":1}]}

‎assets/animations/4284-notification.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎assets/animations/433-checked-done.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎assets/sounds/correct.wav‎

266 KB
Binary file not shown.

‎assets/sounds/incorrect.wav‎

33.1 KB
Binary file not shown.

‎assets/sounds/timeout.wav‎

180 KB
Binary file not shown.

‎src/actions/TriviaActions.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const triviaCategoryFetch = () => {
2020

2121
return (dispatch) => {
2222
TriviaAPI.getCategories().then((categories) => {
23-
console.log(categories);
23+
//console.log(categories);
2424
categories = categories.map(
2525
category => {
2626
return {
@@ -59,7 +59,7 @@ export const triviaFetch = (selectedCategoryId, selectedDifficulty, numberOfQues
5959
category: question.category,
6060
difficulty: question.difficulty,
6161
type: question.type,
62-
correct_answer: question.correct_answer,
62+
correct_answer: entities.decode(question.correct_answer),
6363
question: entities.decode(question.question)
6464
}
6565
}

‎src/components/AnswerStatus.js‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import {
4+
View,
5+
Text,
6+
StyleSheet,
7+
} from 'react-native';
8+
import { Font } from 'expo';
9+
import LottieView from 'lottie-react-native';
10+
11+
const STATUS_FONT = require('../../assets/fonts/BadaboomBB_Reg.ttf');
12+
const CORRECT_ANIMATION = require('../../assets/animations/433-checked-done.json');
13+
const INCORRECT_ANIMATION = require('../../assets/animations/101-x-pop.json');
14+
const TIMEOUT_ANIMATION = require('../../assets/animations/4284-notification.json');
15+
16+
17+
/**
18+
* This object is used for type checking the props of the component.
19+
*/
20+
const propTypes = {
21+
type: PropTypes.oneOf(['correct', 'incorrect', 'timeout']).isRequired,
22+
};
23+
24+
25+
/**
26+
* @description Show the correct animation for answer status based on type.
27+
* @constructor
28+
* @param {Object} props - The props that were defined by the caller of this component.
29+
* @param {string} props.type - Type of the status answer (correct, incorrect or timeout).
30+
*/
31+
class AnswerStatus extends React.Component {
32+
33+
constructor(props){
34+
super(props);
35+
/**
36+
* @typedef {Object} ComponentState
37+
* @property {Object[]} fontLoaded - Indicates whether custom fonts already loaded.
38+
*/
39+
40+
/** @type {ComponentState} */
41+
this.state = {
42+
fontLoaded: false
43+
};
44+
}
45+
46+
async componentDidMount() {
47+
await Font.loadAsync({
48+
'status-text': STATUS_FONT,
49+
});
50+
this.setState({ fontLoaded: true });
51+
}
52+
53+
render() {
54+
let animation;
55+
let statusMessage;
56+
let statusStyle;
57+
switch(this.props.type) {
58+
case 'correct':
59+
animation = CORRECT_ANIMATION;
60+
statusMessage = 'Correct!!!';
61+
statusStyle = styles.correctText;
62+
break;
63+
case 'incorrect':
64+
animation = INCORRECT_ANIMATION;
65+
statusMessage = 'Incorrect!!!';
66+
statusStyle = styles.errorText;
67+
break;
68+
default:
69+
statusMessage = 'Time over!!!';
70+
statusStyle = styles.timeoutText;
71+
animation = TIMEOUT_ANIMATION;
72+
}
73+
74+
return (
75+
(this.state.fontLoaded) &&
76+
<View style={styles.statusContainer}>
77+
<LottieView
78+
style={styles.statusAnimation}
79+
source={animation}
80+
autoPlay={true}
81+
loop={false}
82+
/>
83+
<Text style={[styles.statusText, statusStyle]}>{statusMessage}</Text>
84+
</View>
85+
);
86+
}
87+
}
88+
89+
/**
90+
* AnswerStatus component StyleSheet.
91+
*/
92+
const styles = StyleSheet.create({
93+
statusContainer: {
94+
flex: 1,
95+
height: '100%',
96+
width: '100%',
97+
paddingTop: 0,
98+
borderWidth: 2,
99+
borderRadius: 8,
100+
borderColor: '#ffffff',
101+
justifyContent: 'center',
102+
alignItems: 'center',
103+
alignSelf: 'center',
104+
backgroundColor: 'rgba(255, 255, 255, 0.9)',
105+
},
106+
statusAnimation: {
107+
width: 300,
108+
height: 300
109+
},
110+
statusText: {
111+
fontFamily: "status-text",
112+
fontSize: 40,
113+
textShadowRadius: 10,
114+
marginTop: -60
115+
},
116+
correctText: {
117+
color: '#00C871'
118+
},
119+
errorText: {
120+
color: '#FF1122'
121+
},
122+
timeoutText: {
123+
color: '#FFAA38'
124+
},
125+
});
126+
127+
// Type checking the props of the component
128+
AnswerStatus.propTypes = propTypes;
129+
130+
export default AnswerStatus;

‎src/components/Button.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const Button = ({ onPress, children, style }) => {
2323
const { buttonStyle, textStyle } = styles;
2424

2525
return (
26-
<TouchableOpacity onPress={onPress} style={[style, buttonStyle]}>
26+
<TouchableOpacity onPress={onPress} style={[buttonStyle, style]}>
2727
<Text style={textStyle}>
2828
{children}
2929
</Text>

‎src/components/TriviaLoader.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ class TriviaLoader extends React.Component {
7979
}
8080

8181
/**
82-
* TriviaScreen component StyleSheet.
82+
* TriviaLoader component StyleSheet.
8383
*/
8484
const styles = StyleSheet.create({
8585
container: {

0 commit comments

Comments
 (0)