AreSameImagesRandom.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <template>
  2. <ExperimentBlock
  3. :experiment-name="experimentName"
  4. :scene-name="sceneName"
  5. :loading-message="loadingMessage"
  6. :loading-error-message="loadingErrorMessage"
  7. >
  8. <template v-slot:header></template>
  9. <template v-slot:content>
  10. <v-flex xs12 sm6>
  11. <v-card dark color="primary">
  12. <v-card-text class="px-0">Image 1</v-card-text>
  13. <v-img v-if="image1 && image1.link" :src="image1.link">
  14. <template v-slot:placeholder>
  15. <v-layout fill-height align-center justify-center ma-0>
  16. <v-progress-circular indeterminate color="grey lighten-5" />
  17. </v-layout>
  18. </template>
  19. </v-img>
  20. </v-card>
  21. </v-flex>
  22. <v-flex sm6 xs12>
  23. <v-card dark color="primary">
  24. <v-card-text>Image 2</v-card-text>
  25. <v-img v-if="image2 && image2.link" :src="image2.link" @load="scrollToChoiceButtons">
  26. <template v-slot:placeholder>
  27. <v-layout fill-height align-center justify-center ma-0>
  28. <v-progress-circular indeterminate color="grey lighten-5" />
  29. </v-layout>
  30. </template>
  31. </v-img>
  32. </v-card>
  33. </v-flex>
  34. <!-- Experiment validation button -->
  35. <v-layout justify-center align-content-center>
  36. <div id="choice">
  37. <v-container grid-list-md text-xs-center fluid>
  38. <h2>Test {{ testCount }} / {{ maxTestCount }}</h2>
  39. <v-layout row wrap>
  40. <v-flex sm6 xs12>
  41. <v-btn @click="nextAction(false)" color="error" large>Images are NOT the same</v-btn>
  42. </v-flex>
  43. <v-flex sm6 xs12>
  44. <v-btn @click="nextAction(true)" color="success" large>Images are the same</v-btn>
  45. </v-flex>
  46. </v-layout>
  47. </v-container>
  48. </div>
  49. </v-layout>
  50. <!--/ Experiment validation button -->
  51. </template>
  52. </ExperimentBlock>
  53. </template>
  54. <script>
  55. import ExperimentBlock from '@/components/ExperimentBlock.vue'
  56. import ExperimentBaseAreSameImages from '@/mixins/ExperimentBaseAreSameImages'
  57. import { rand } from '@/functions'
  58. export default {
  59. components: {
  60. ExperimentBlock
  61. },
  62. mixins: [ExperimentBaseAreSameImages],
  63. data() {
  64. return {}
  65. },
  66. async mounted() {
  67. // Load config for this scene to local state
  68. this.loadConfig()
  69. // Load progress from store into local state
  70. this.loadProgress()
  71. // Load scene data from the API
  72. await this.getQualitiesList()
  73. // Load a test if not already one loaded
  74. if (!this.image1 || !this.image1.link || !this.image2 || !this.image2.link) {
  75. const { image1, image2 } = await this.getRandomTest()
  76. this.image1 = image1
  77. this.image2 = image2
  78. }
  79. this.saveProgress()
  80. },
  81. methods: {
  82. // Get a test with random qualities
  83. getRandomTest() {
  84. return this.getTest(
  85. this.qualities[rand(0, this.qualities.length - 1)],
  86. this.qualities[rand(0, this.qualities.length - 1)]
  87. )
  88. },
  89. // generate next action and save data
  90. async nextAction(same) {
  91. let additionalData = {
  92. stepCounter: this.testCount,
  93. maxStepCount: this.maxTestCount
  94. }
  95. this.areTheSameAction(same, this.getRandomTest, additionalData)
  96. }
  97. }
  98. }
  99. </script>