If you need two independent events to trigger a third, you need to monitor both events and have some means of remembering their history. Each time one of the events happens, you check to see if the other event has happened previously and, if so, trigger the third. If not, you need to remember the event the has happened until the other event is detected. (I think you get this but may be unclear as to how to do this in javascript).

My working snippet below is an example where two red boxes are drawn. If either is clicked it will change but a third box will not change unless both are clicked. It doesn't matter which order the two boxes were clicked. In this example, 'memory' of earlier clicks is done by checking whether the other box has already changed.

Crucially, the example illustrates how to set up event listeners to constantly monitor change. They are functions applied to page ojects that take two arguments 1) the event to listen for, in this case click' but it could be change or mouseover etc and 2) the action to perform when the event is detected. Commonly, as in this example, an arrow or orfan function can be included as the actual argument (but a reference to an external function will work too).

// make references to objects on page:
const firstTarget = document.getElementById('target1');
const secondTarget = document.getElementById('target2');
const output = document.getElementById('output');

// set event listeners for click on first target:
firstTarget.addEventListener('click', event => {
event.target.style="background:yellow";
event.target.innerHTML="1st clicked";
checkStatus();
}); // end event listener 1;

// set event listeners for click on second target:
secondTarget.addEventListener('click', event => {
event.target.style="background:green";
event.target.innerHTML="2nd clicked";
checkStatus();
}); // end event listener 2;

function checkStatus() {
  if (firstTarget.innerHTML=="1st clicked" && secondTarget.innerHTML=="2nd clicked") {
   output.innerHTML = "BOTH CLICKED!";
   output.style="background:red";
   } // end if block;
} // end checkStatus function;

div {
 display: inline-block;
 background: red;
 width: 80px;
 height: 30px;
 border: 1px solid black;
 padding: 10px;
 margin: 5px;
}
#output {
 background: white;
 width: 195px;
 height: 35px;
}

<div id="target1">click me</div>
<div id="target2">click me</div>
<br>
<div id="output"></div>

If been trying to find a solution by checking if "answerDisplayOne" and "answerDisplayTwo" are both visible and then calling a function but with no success:

This happens because you check the condition only once¹:

if ( $("#answerDisplayOne").css('display') == 'inline' && $("#answerDisplayTwo").css('display') == 'inline'){
  function delayTwo (URL) {
    setTimeout( function() { window.location = URL }, 3500 );
    document.getElementById('video').play();
  }
}

Means it checks the condition and defines a function delayTwo IF #answerDisplayOne and #answerDisplayTwo both have the css property "display" set to "inline". This is not what you want.

You want to check the condition every time the user presses a button:

function answerOne() {
  document.getElementById("answerDisplyOne").style.display = "inline";
  document.getElementById("buttonCorrectAnswerOne").style.display = "none";
  check();
}

function answerTwo() {
  document.getElementById("answerDisplayTwo").style.display = "inline";
  document.getElementById("buttonCorrectAnswerTwo").style.display = "none";
  check();
}

function check() {
  if ($("#answerDisplayOne").css('display') == 'inline' && $("#answerDisplayTwo").css('display') == 'inline'){
    setTimeout( function() { window.location = URL }, 3500 );
    document.getElementById('video').play();
  }
}

¹ by once I literally mean once. JavaScript is executed from top to bottom. That's why we use event listeners to execute code once something happened. We can't know in advance when the user will click a button can we?