Skip to content

Commit

Permalink
Fix Part of oppia#9749: Migration of Exploration-editor-tab, explorat…
Browse files Browse the repository at this point in the history 
…ion-save-and-publish-buttons, exploration-save-prompt-modal (oppia#16252)

* bc

* done

* small

* e2e test done

* done

* updated

* updated

* done

* updated

* done

* testing corrected last

* lint issue fixed

* updated

* last test

* updated

* updated
  • Loading branch information
@heyimShivam
heyimShivam authored Oct 17, 2022
1 parent 64b0a62 commit 411cfc4
Show file tree
Hide file tree
Showing 20 changed files with 2,630 additions and 2,744 deletions.
2 changes: 1 addition & 1 deletion core/templates/components/shared-component.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@ import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
AngularFireModule.initializeApp(AuthService.firebaseConfig),
AngularFireAuthModule,
MatProgressSpinnerModule,
NgbModalModule
NgbModalModule,
],

providers: [
Expand Down
93 changes: 60 additions & 33 deletions core/templates/components/state-editor/state-editor.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,28 @@
<ng-template #ContentEditorTab>
<h3 class="e2e-test-joyride-title">Content</h3>
<p>An Oppia exploration is divided into several 'cards'. The first part of a card is the <b>content</b>. Use the content section to set the scene. Tell the learner a story,
give them some information, and then ask a relevant question.</p>
</ng-template>

<ng-template #StateInteractionEditorTab>
<h3 class="e2e-test-joyride-title">Interaction</h3>
<p>After you've written the content of your conversation, choose an <b>interaction type</b>. An interaction is how you want your learner to respond
to your question. Oppia has several built-in interactions, including:
</p>
<ul>
<li>Multiple Choice</li>
<li>Text/Number input</li>
<li>Code snippets</li>
</ul> and more.
</ng-template>

<ng-template #StateResponsesTab>
<h3 class="e2e-test-joyride-title">Responses</h3>
<p>
After the learner uses the interaction you created, it's your turn again to choose how your exploration will respond to their input. You can send a learner to a new card or have them repeat the same card, depending on how they answer.
</p>
</ng-template>

<mat-card class="oppia-editor-card-with-avatar">
<div class="state-content-header-container" (click)="toggleConceptCard()">
<div class="state-content-header oppia-mobile-collapsible-card-header">
Expand All @@ -12,7 +37,7 @@ <h3 class="oppia-exp-content-card-header">Content</h3>
</i>
</div>
</div>
<div class="oppia-mobile-collapsible-card-content" *ngIf="conceptCardIsShown">
<div class="oppia-mobile-collapsible-card-content" *ngIf="conceptCardIsShown" joyrideStep="editorTabTourContentEditorTab" [stepContent]="ContentEditorTab">
<div class="oppia-editor-card-body oppia-editor-concept-container">
<img *ngIf="!windowIsNarrow" [src]="oppiaBlackImgUrl" alt="" class="oppia-editor-card-avatar">
<div id="tutorialStateContent" class="oppia-editor-card-section state-content-editor-parent-container">
Expand All @@ -27,46 +52,48 @@ <h3 class="oppia-exp-content-card-header">Content</h3>
</div>
</mat-card>

<div [hidden]="!interactionIsShown">
<div joyrideStep="editorTabTourSlideStateInteractionEditorTab" [stepContent]="StateInteractionEditorTab">
<oppia-state-interaction-editor (onSaveStateContent)="sendOnSaveStateContent($event)"
(onSaveInteractionId)="sendOnSaveInteractionId($event)"
(onSaveInteractionCustomizationArgs)="sendOnSaveInteractionCustomizationArgs($event)"
(onSaveNextContentIdIndex)="sendOnSaveNextContentIdIndex($event)"
(onSaveSolution)="sendOnSaveSolution($event)"
(recomputeGraph)="sendRecomputeGraph()"
(markAllAudioAsNeedingUpdateModalIfRequired)="sendShowMarkAllAudioAsNeedingUpdateModalIfRequired($event)">
(markAllAudioAsNeedingUpdateModalIfRequired)="sendShowMarkAllAudioAsNeedingUpdateModalIfRequired($event)"
[hidden]="!interactionIsShown">
</oppia-state-interaction-editor>
</div>

<div [hidden]="!interactionIdIsSet || currentStateIsTerminal">
<oppia-state-responses [addState]="addState"
(navigateToState)="sendNavigateToState($event)"
(onResponsesInitialized)="reinitializeEditor()"
(onSaveInapplicableSkillMisconceptionIds)="sendOnSaveInapplicableSkillMisconceptionIds($event)"
(onSaveInteractionAnswerGroups)="sendOnSaveInteractionAnswerGroups($event)"
(onSaveInteractionDefaultOutcome)="sendOnSaveInteractionDefaultOutcome($event)"
(onSaveNextContentIdIndex)="sendOnSaveNextContentIdIndex($event)"
(onSaveSolicitAnswerDetails)="sendOnSaveSolicitAnswerDetails($event)"
(refreshWarnings)="sendRefreshWarnings()"
(showMarkAllAudioAsNeedingUpdateModalIfRequired)="sendShowMarkAllAudioAsNeedingUpdateModalIfRequired($event)">
</oppia-state-responses>
<div>
<oppia-state-hints-editor (onSaveNextContentIdIndex)="sendOnSaveNextContentIdIndex($event)"
(onSaveSolution)="sendOnSaveSolution($event)"
(onSaveHints)="sendOnSaveHints($event)"
(showMarkAllAudioAsNeedingUpdateModalIfRequired)="sendShowMarkAllAudioAsNeedingUpdateModalIfRequired($event)">
</oppia-state-hints-editor>
</div>
<div *ngIf="currentInteractionCanHaveSolution">
<oppia-state-solution-editor (saveSolution)="sendOnSaveSolution($event)"
(refreshWarnings)="sendRefreshWarnings()"
(showMarkAllAudioAsNeedingUpdateModalIfRequired)="sendShowMarkAllAudioAsNeedingUpdateModalIfRequired($event)">
</oppia-state-solution-editor>
</div>
<div *ngIf="explorationIsLinkedToStory">
<state-skill-editor (onSaveStateContent)="sendOnSaveStateContent($event)"
(onSaveLinkedSkillId)="sendOnSaveLinkedSkillId($event)">
</state-skill-editor>
<div joyrideStep="editorTabTourStateResponsesTab" [stepContent]="StateResponsesTab">
<div [hidden]="!interactionIdIsSet || currentStateIsTerminal">
<oppia-state-responses [addState]="addState"
(navigateToState)="sendNavigateToState($event)"
(onResponsesInitialized)="reinitializeEditor()"
(onSaveInapplicableSkillMisconceptionIds)="sendOnSaveInapplicableSkillMisconceptionIds($event)"
(onSaveInteractionAnswerGroups)="sendOnSaveInteractionAnswerGroups($event)"
(onSaveInteractionDefaultOutcome)="sendOnSaveInteractionDefaultOutcome($event)"
(onSaveNextContentIdIndex)="sendOnSaveNextContentIdIndex($event)"
(onSaveSolicitAnswerDetails)="sendOnSaveSolicitAnswerDetails($event)"
(refreshWarnings)="sendRefreshWarnings()"
(showMarkAllAudioAsNeedingUpdateModalIfRequired)="sendShowMarkAllAudioAsNeedingUpdateModalIfRequired($event)">
</oppia-state-responses>
<div>
<oppia-state-hints-editor (onSaveNextContentIdIndex)="sendOnSaveNextContentIdIndex($event)"
(onSaveSolution)="sendOnSaveSolution($event)"
(onSaveHints)="sendOnSaveHints($event)"
(showMarkAllAudioAsNeedingUpdateModalIfRequired)="sendShowMarkAllAudioAsNeedingUpdateModalIfRequired($event)">
</oppia-state-hints-editor>
</div>
<div *ngIf="currentInteractionCanHaveSolution">
<oppia-state-solution-editor (saveSolution)="sendOnSaveSolution($event)"
(refreshWarnings)="sendRefreshWarnings()"
(showMarkAllAudioAsNeedingUpdateModalIfRequired)="sendShowMarkAllAudioAsNeedingUpdateModalIfRequired($event)">
</oppia-state-solution-editor>
</div>
<div *ngIf="explorationIsLinkedToStory">
<state-skill-editor (onSaveStateContent)="sendOnSaveStateContent($event)"
(onSaveLinkedSkillId)="sendOnSaveLinkedSkillId($event)">
</state-skill-editor>
</div>
</div>
</div>

Expand Down
95 changes: 59 additions & 36 deletions .../templates/pages/exploration-editor-page/editor-tab/exploration-editor-tab.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,74 +1,97 @@
<div class="exp-editor-content-container"
ng-joy-ride="$ctrl.tutorialInProgress"
config="$ctrl.EDITOR_TUTORIAL_OPTIONS"
on-finish="$ctrl.onFinishTutorial()"
on-skip="$ctrl.onSkipTutorial()">
<ng-template #EditorTabTourContainer>
<h3 class="e2e-test-joyride-title">Creating in Oppia</h3>
<p>Explorations are learning experiences that you create using Oppia. Think of explorations as a conversation between a student and a tutor.</p>
</ng-template>

<ng-template #EditorTabTourTutorialComplete>
<h3 class="e2e-test-joyride-title">Tutorial Complete</h3>
<div>
<h4>Now for the fun part...</h4>
That's the end of the tour! To finish up, here are some things we suggest:
<ul>
<li>
Create your first card!
</li>
<li>
Preview your exploration.
</li>
<li>
Check out more resources in the
<a href="https://oppia.github.io/#/" rel="noopener" target="_blank">
Help Center.
</a>
</li>
</ul>
</div>
</ng-template>

<div class="exp-editor-content-container" joyrideStep="editorTabTourContainer" [stepContent]="EditorTabTourContainer">
<div class="exp-editor-main-editor">
<div class="oppia-editor-cards-container e2e-test-editor-cards-container">
<div class="oppia-editor-header">
<oppia-state-name-editor></oppia-state-name-editor>
</div>
<div>
<md-checkbox class="checkpoint-selection-checkbox e2e-test-checkpoint-selection-checkbox"
ng-change="$ctrl.onChangeCardIsCheckpoint()"
ng-model="$ctrl.stateCardIsCheckpointService.displayed"
ng-disabled="!$ctrl.isEditable()">
<mat-checkbox class="checkpoint-selection-checkbox e2e-test-checkpoint-selection-checkbox"
(change)="onChangeCardIsCheckpoint()"
[(ngModel)]="stateCardIsCheckpointService.displayed"
[disabled]="!isEditable()">
Set as a checkpoint for learners
</md-checkbox>
</mat-checkbox>
</div>
<div ng-if="$ctrl.areParametersEnabled()">
<div *ngIf="areParametersEnabled()">
<state-param-changes-editor></state-param-changes-editor>
</div>

<oppia-state-editor (on-save-state-content)="$ctrl.saveStateContent($event)"
(on-save-interaction-customization-args)="$ctrl.saveInteractionCustomizationArgs($event)"
(on-save-next-content-id-index)="$ctrl.saveNextContentIdIndex($event)"
(on-save-interaction-id)="$ctrl.saveInteractionId($event)"
(on-save-interaction-default-outcome)="$ctrl.saveInteractionDefaultOutcome($event)"
(on-save-interaction-answer-groups)="$ctrl.saveInteractionAnswerGroups($event)"
(on-save-linked-skill-id)="$ctrl.saveLinkedSkillId($event)"
(on-save-solution)="$ctrl.saveSolution($event)"
(on-save-hints)="$ctrl.saveHints($event)"
(on-save-solicit-answer-details)="$ctrl.saveSolicitAnswerDetails($event)"
(recompute-graph)="$ctrl.recomputeGraph()"
(show-mark-all-audio-as-needing-update-modal-if-required)="$ctrl.showMarkAllAudioAsNeedingUpdateModalIfRequired($event)"
[state-content-placeholder]="$ctrl.getStateContentPlaceholder()"
[state-content-save-button-placeholder]="$ctrl.getStateContentSaveButtonPlaceholder()"
(navigate-to-state)="$ctrl.navigateToState($event)"
(refresh-warnings)="$ctrl.refreshWarnings()"
[add-state]="$ctrl.addState"
[interaction-is-shown]="$ctrl.interactionIsShown"
[exploration-is-linked-to-story]="$ctrl.explorationIsLinkedToStory">
<oppia-state-editor [stateContentPlaceholder]="getStateContentPlaceholder()"
[stateContentSaveButtonPlaceholder]="getStateContentSaveButtonPlaceholder()"
[addState]="addState.bind(this)"
[interactionIsShown]="interactionIsShown"
[explorationIsLinkedToStory]="explorationIsLinkedToStory"
(onSaveStateContent)="saveStateContent($event)"
(onSaveInteractionCustomizationArgs)="saveInteractionCustomizationArgs($event)"
(onSaveNextContentIdIndex)="saveNextContentIdIndex($event)"
(onSaveInteractionId)="saveInteractionId($event)"
(onSaveInteractionDefaultOutcome)="saveInteractionDefaultOutcome($event)"
(onSaveInteractionAnswerGroups)="saveInteractionAnswerGroups($event)"
(onSaveLinkedSkillId)="saveLinkedSkillId($event)"
(onSaveSolution)="saveSolution($event)"
(onSaveHints)="saveHints($event)"
(onSaveSolicitAnswerDetails)="saveSolicitAnswerDetails($event)"
(recomputeGraph)="recomputeGraph()"
(showMarkAllAudioAsNeedingUpdateModalIfRequired)="showMarkAllAudioAsNeedingUpdateModalIfRequired($event)"
(navigateToState)="navigateToState($event)"
(refreshWarnings)="refreshWarnings()">
</oppia-state-editor>
</div>
</div>
<div class="exp-editor-overview">
<div class="exp-editor-overview-content">
<oppia-exploration-graph></oppia-exploration-graph>
<div class="exp-editor-content-container" joyrideStep="editorTabTourTutorialComplete" [stepContent]="EditorTabTourTutorialComplete"></div>
<oppia-unresolved-answers-overview></oppia-unresolved-answers-overview>
</div>
</div>
<attribution-guide></attribution-guide>
</div>

<style>
exploration-editor-tab .exp-editor-content-container {
.exp-editor-content-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
exploration-editor-tab .exp-editor-main-editor {
.exp-editor-main-editor {
margin-right: 3%;
width: 40%;
}
exploration-editor-tab .exp-editor-overview {
.exp-editor-overview {
width: 30%;
}
exploration-editor-tab .exp-editor-overview-content {
.exp-editor-overview-content {
margin-top: 40px;
}
@media screen and (max-width: 768px) {
exploration-editor-tab .exp-editor-main-editor {
.exp-editor-main-editor {
margin-right: 0;
width: 100%;
}
Expand Down
Loading

0 comments on commit 411cfc4

Please sign in to comment.