How to modify react function

Development
1

Hello
How can I modify this page. I want to edit fucntion which proccess “Im ready to ..” button. I’ve opened frontend-app-learning plugin. But there is no button for exam.

{84845532-A8B6-4CC4-80CB-BD8382A91A70}
{84845532-A8B6-4CC4-80CB-BD8382A91A70}1845×718 53.3 KB

2

Hi @Erarys could you be more specific in what you’re trying to do? Also what version of the platform or Tutor are you using?

3

I am using Tutor version 20.0.0 with edx-platform (release/teak).
I want to modify the button that starts the exam. Specifically, I need to change its behavior so that when the user clicks it, they are redirected to another page.

4

I think any related code for this action is going to be found in the edx-proctoring repo. not sure exactly how it all works but from what I can figure out it looks like it’s all based on API calls, looks like clicking the button triggers a state change and then reloads the page so effectively there are no redirects involved here. Unless I’m misreading it…

5

Yes yes, I know, but I want to modify it. I want that when we click it, it redirects us to the Chrome proctoring extension.

I connected the plugin “frontend-app-learning”, and it’s working, but there is no button to start — “I am ready to start this timed exam.” It’s unavailable there, and in the instructions it says to connect “frontend-lib-special-exams.”

Do you know something about this lib? How can I redirect the user to proctoring until the exam starts?

6

This is the referenced library - GitHub - openedx/frontend-lib-special-exams: Frontend component library for displaying special exams on the edx platform · GitHub - I do not know how it works, though.

7

@Agrendalath I saw you made a PR to GitHub - openedx/frontend-lib-special-exams: Frontend component library for displaying special exams on the edx platform · GitHub to add a plugin slot so maybe you understand this lib - any advice here?

8

@Erarys, this button is implemented here. The button handlers are mostly in this file. If you want to override this button’s behavior, these are probably the most straightforward options:

  1. Create a new plugin slot (similarly to this one) that allows overriding the StartTimedExamInstructions page, and then use an MFE plugin to do so.
  2. (This one is even easier.) Add JS overrides for this button to your Learning Header. Something like this could work:
    const redirectToCustomExam = useCallback( (event) => {
  // The redirection logic.
});

useElementEventListener('click', '[data-testid="start-exam-button"]', redirectToCustomExam);
1 Like
9

Thanks it helped