function change_state(state) {
  // change to the chooseInput frame
  if (state == 'input') {
    document.querySelector('main').className = 'ChooseInputFrame';
    location.reload();
  }
  //change to takePic frame
  if (state == 'video') {
    document.querySelector('main').className = 'TakePicFrame';
    document.getElementById('logo_container').style.display = 'none';
    document.getElementById('input_button_container').style.display = 'none';
    document.getElementById('video_container').style.display = 'flex';

    document.getElementById('question_container').style.display = 'none';
    document.getElementById('result_container').style.display = 'none';
  }
  //change to question frame
  if (state == 'question') {
    document.querySelector('main').className = 'QuestionFrame';
    document.getElementById('logo_container').style.display = 'none';
    document.getElementById('input_button_container').style.display = 'none';
    document.getElementById('video_container').style.display = 'none';

    document.getElementById('result_container').style.display = 'none';
    document.getElementById('question_container').style.display = 'flex';
  }
  //change to result frame
  if (state == 'result') {
    document.getElementById('yes_button').style.display = 'block';
    document.getElementById('no_button').style.display = 'block';
    document.getElementById('q_pre').style.display = 'flex';
    document.getElementById('q_next').style.display = 'flex';
    put_question();

    document.querySelector('main').className = 'ResultFrame';
    document.getElementById('input_button_container').style.display = 'none';

    document.getElementById('question_container').style.display = 'none';
    document.getElementById('result_container').style.display = 'flex';
  }
}
//To swich b/w frames

To swich b/w frames
To swich b / w frames
function change_state(state) {
  if (state == 'input') {
    document.querySelector('main').className = 'ChooseInputFrame';
    location.reload();
  }
  if (state == 'video') {
    document.querySelector('main').className = 'TakePicFrame';
    document.getElementById('logo_container').style.display = 'none';
    document.getElementById('input_button_container').style.display = 'none';
    document.getElementById('video_container').style.display = 'flex';
    document.getElementById('question_container').style.display = 'none';
    document.getElementById('result_container').style.display = 'none';
  }
  if (state == 'question') {
    document.querySelector('main').className = 'QuestionFrame';
    document.getElementById('logo_container').style.display = 'none';
    document.getElementById('input_button_container').style.display = 'none';
    document.getElementById('video_container').style.display = 'none';
    document.getElementById('result_container').style.display = 'none';
    document.getElementById('question_container').style.display = 'flex';
  }
  if (state == 'result') {
    document.getElementById('yes_button').style.display = 'block';
    document.getElementById('no_button').style.display = 'block';
    document.getElementById('q_pre').style.display = 'flex';
    document.getElementById('q_next').style.display = 'flex';
    put_question();
    document.querySelector('main').className = 'ResultFrame';
    document.getElementById('input_button_container').style.display = 'none';
    document.getElementById('question_container').style.display = 'none';
    document.getElementById('result_container').style.display = 'flex';
  }
}
function change_state ( state ) { if ( state == 'input' ) { document . querySelector ( 'main' ) . className = 'ChooseInputFrame' ; location . reload ( ) ; } if ( state == 'video' ) { document . querySelector ( 'main' ) . className = 'TakePicFrame' ; document . getElementById ( 'logo_container' ) . style . display = 'none' ; document . getElementById ( 'input_button_container' ) . style . display = 'none' ; document . getElementById ( 'video_container' ) . style . display = 'flex' ; document . getElementById ( 'question_container' ) . style . display = 'none' ; document . getElementById ( 'result_container' ) . style . display = 'none' ; } if ( state == 'question' ) { document . querySelector ( 'main' ) . className = 'QuestionFrame' ; document . getElementById ( 'logo_container' ) . style . display = 'none' ; document . getElementById ( 'input_button_container' ) . style . display = 'none' ; document . getElementById ( 'video_container' ) . style . display = 'none' ; document . getElementById ( 'result_container' ) . style . display = 'none' ; document . getElementById ( 'question_container' ) . style . display = 'flex' ; } if ( state == 'result' ) { document . getElementById ( 'yes_button' ) . style . display = 'block' ; document . getElementById ( 'no_button' ) . style . display = 'block' ; document . getElementById ( 'q_pre' ) . style . display = 'flex' ; document . getElementById ( 'q_next' ) . style . display = 'flex' ; put_question ( ) ; document . querySelector ( 'main' ) . className = 'ResultFrame' ; document . getElementById ( 'input_button_container' ) . style . display = 'none' ; document . getElementById ( 'question_container' ) . style . display = 'none' ; document . getElementById ( 'result_container' ) . style . display = 'flex' ; } }
To swich b/w frames
To swich b / w frames
// change to the chooseInput frame
 //change to takePic frame
 //change to question frame
 //change to result frame
