PR 2.1 : Added ExtractImageFilenamesFromStateService (#4965)

* check the states * check the states * Created ExtractImageFilenamesFromStateService and its Spec file * created a separate file exploration_dict.js * added changes according to the comment * Updated
oppia · May 25, 2018 · ef7b206 · ef7b206
1 parent 60aa9d8
commit ef7b206
Show file tree

Hide file tree

Showing 5 changed files with 681 additions and 0 deletions.
diff --git a/core/templates/dev/head/pages/exploration_player/ExtractImageFilenamesFromStateService.js b/core/templates/dev/head/pages/exploration_player/ExtractImageFilenamesFromStateService.js
@@ -0,0 +1,110 @@
+// Copyright 2017 The Oppia Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS-IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/**
+ * @fileoverview Service to extract image filenames in a State.
+ */
+
+oppia.factory('ExtractImageFilenamesFromStateService', [
+  'HtmlEscaperService', function(HtmlEscaperService) {
+    var INTERACTION_TYPE_MULTIPLE_CHOICE = 'MultipleChoiceInput';
+    var INTERACTION_TYPE_ITEM_SELECTION = 'ItemSelectionInput';
+    var INTERACTION_TYPE_IMAGE_CLICK_INPUT = 'ImageClickInput';
+
+    var filenamesInState = [];
+    var _getAllHtmlOfState = function(state) {
+      var _allHtmlInTheState = [];
+      // The order of the extracted image names is same as they appear in a
+      // state. The images should be preloaded in the following order ---
+      // content, customizationArgs of interactions, feedback of outcomes ()
+      // including feedback of default outcome if any), hints, solution if any.
+      var stateContentHtml = state.content.getHtml();
+      _allHtmlInTheState.push(stateContentHtml);
+
+      if (state.interaction.id === INTERACTION_TYPE_MULTIPLE_CHOICE ||
+          state.interaction.id === INTERACTION_TYPE_ITEM_SELECTION ) {
+        var customizationArgsHtml = '';
+        state.interaction.customizationArgs.choices.value.forEach(
+          function(value) {
+            customizationArgsHtml = customizationArgsHtml.concat(value);
+          });
+        _allHtmlInTheState.push(customizationArgsHtml);
+      }
+
+      state.interaction.answerGroups.forEach(function(answerGroup) {
+        var answerGroupHtml = answerGroup.outcome.feedback.getHtml();
+        _allHtmlInTheState.push(answerGroupHtml);
+      });
+
+      if (state.interaction.defaultOutcome !== null) {
+        var defaultOutcomeHtml = (
+          state.interaction.defaultOutcome.feedback.getHtml());
+        if (defaultOutcomeHtml !== '') {
+          _allHtmlInTheState.push(defaultOutcomeHtml);
+        }
+      }
+
+      state.interaction.hints.forEach(function(hint) {
+        var hintHtml = hint.hintContent.getHtml();
+        _allHtmlInTheState.push(hintHtml);
+      });
+      if (state.interaction.solution !== null) {
+        var solutionHtml = state.interaction.solution.explanation.getHtml();
+        _allHtmlInTheState.push(solutionHtml);
+      }
+      return _allHtmlInTheState;
+    };
+
+    var _extractFilepathValueFromOppiaNonInteractiveImageTag = function(
+        strHtml) {
+      var filenames = [];
+      var dummyElement = document.createElement('div');
+      dummyElement.innerHTML = (
+        HtmlEscaperService.escapedStrToUnescapedStr(strHtml));
+
+      var imageTagList = dummyElement.getElementsByTagName(
+        'oppia-noninteractive-image');
+      for (i = 0; i < imageTagList.length; i++) {
+        filenames.push(imageTagList[i].getAttribute('filepath-with-value'));
+      }
+      // The name in the array is stored as '"image.png"'. We need to remove
+      // the inverted commas. We remove the first and the last character from
+      // the string (name).
+      filenames = filenames.map(function(filename) {
+        return filename.slice(1, filename.length - 1);
+      });
+      return filenames;
+    };
+
+    var _getImageFilenamesInState = function(state) {
+      var filenamesInState = [];
+      // The Image Click Input interaction has an image whose filename is
+      // directly stored in the customizationArgs.imageAndRegion.value
+      // .imagePath
+      if (state.interaction.id === 'INTERACTION_TYPE_IMAGE_CLICK_INPUT') {
+        filenamesInState.push(
+          state.interaction.customizationArgs.imageAndRegions.value.imagePath);
+      }
+      allHtmlOfState = _getAllHtmlOfState(state);
+      allHtmlOfState.forEach(function(htmlStr) {
+        filenamesInState = filenamesInState.concat(
+          _extractFilepathValueFromOppiaNonInteractiveImageTag(htmlStr));
+      });
+      return filenamesInState;
+    };
+
+    return {
+      getImageFilenamesInState: _getImageFilenamesInState
+    };
+  }]);
diff --git a/.../templates/dev/head/pages/exploration_player/ExtractImageFilenamesFromStateServiceSpec.js b/.../templates/dev/head/pages/exploration_player/ExtractImageFilenamesFromStateServiceSpec.js
@@ -0,0 +1,68 @@
+// Copyright 2017 The Oppia Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the 'License');
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an 'AS-IS' BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/**
+ * @fileoverview Unit tests for the extracting image files in state service.
+ */
+
+describe('Extracting Image file names in the state service', function() {
+  beforeEach(function() {
+    module('oppia');
+    // Set a global value for INTERACTION_SPECS that will be used by all the
+    // descendant dependencies.
+    module(function($provide) {
+      $provide.constant('INTERACTION_SPECS', {
+        TextInput: {
+          is_terminal: false
+        },
+        ItemSelectionInput: {
+          is_terminal: false
+        },
+        MultipleChoiceInput: {
+          is_terminal: false
+        },
+        Continue: {
+          is_terminal: false
+        },
+        EndExploration: {
+          is_terminal: true
+        }
+      });
+    });
+  });
+
+  var eifss, eof, ecs;
+  var $rootScope = null;
+  beforeEach(inject(function($injector) {
+    eof = $injector.get('ExplorationObjectFactory');
+    ecs = $injector.get('ExplorationContextService');
+    eifss = $injector.get('ExtractImageFilenamesFromStateService');
+    spyOn(ecs, 'getExplorationId').and.returnValue('1');
+    $rootScope = $injector.get('$rootScope');
+  }));
+
+  it('should get all the filenames of the images in a state',
+    function() {
+      var exploration = eof.createFromBackendDict(explorationDict);
+      var states = exploration.getStates();
+      var stateNames = states.getStateNames();
+      stateNames.forEach(function(statename) {
+        var filenamesInState = (
+          eifss.getImageFilenamesInState(states.getState(statename)));
+        filenamesInState.forEach(function(filename) {
+          expect(ImageFilenamesInExploration[statename]).toContain(filename);
+        });
+      });
+    });
+});
diff --git a/core/templates/dev/head/pages/exploration_player/exploration_player.html b/core/templates/dev/head/pages/exploration_player/exploration_player.html
@@ -181,6 +181,7 @@ <h1 class="oppia-exploration-h1"><span class="protractor-test-exploration-header
   <script src="{{TEMPLATE_DIR_PREFIX}}/pages/exploration_player/AudioTranslationManagerService.js"></script>
   <script src="{{TEMPLATE_DIR_PREFIX}}/pages/exploration_player/AudioBarDirective.js"></script>
   <script src="{{TEMPLATE_DIR_PREFIX}}/pages/exploration_player/AudioPreloaderService.js"></script>
+  <script src="{{TEMPLATE_DIR_PREFIX}}/pages/exploration_player/ExtractImageFilenamesFromStateService.js"></script>
 
   <script src="{{TEMPLATE_DIR_PREFIX}}/expressions/ExpressionSyntaxTreeService.js"></script>
   <script src="{{TEMPLATE_DIR_PREFIX}}/expressions/ExpressionEvaluatorService.js"></script>