239 lines
No EOL
11 KiB
PHP
239 lines
No EOL
11 KiB
PHP
<?php
|
|
/**
|
|
* Template for displaying the assessment interface (pre-screening or main assessment).
|
|
*
|
|
* This template is loaded directly by FrontendHandler::handle_assessment_invite()
|
|
* when a valid invitation token is detected.
|
|
*
|
|
* Available Query Vars:
|
|
* - quiztech_invitation_data: (object) The validated invitation data row from the DB.
|
|
* - quiztech_current_step: (string) 'pre_screening' or 'assessment'.
|
|
* - quiztech_pre_screening_questions: (mixed) The pre-screening questions data (if any).
|
|
*/
|
|
|
|
// Prevent direct access
|
|
if ( ! defined( 'ABSPATH' ) ) {
|
|
exit;
|
|
}
|
|
|
|
// Retrieve data passed from the handler
|
|
$invitation_data = get_query_var( 'quiztech_invitation_data' );
|
|
$current_step = get_query_var( 'quiztech_current_step' ); // Note: This might be less relevant now with the landing page approach
|
|
$pre_screening_questions = get_query_var( 'quiztech_pre_screening_questions' );
|
|
|
|
// Basic security check - ensure we have invitation data
|
|
if ( ! $invitation_data ) {
|
|
// Should not happen if loaded correctly by the handler, but good practice.
|
|
wp_die( esc_html__( 'Could not load assessment data. Invalid invitation.', 'quiztech' ) );
|
|
}
|
|
|
|
// Fetch associated Job and Assessment details
|
|
$job_post = get_post( $invitation_data->job_id );
|
|
$assessment_post = get_post( $invitation_data->assessment_id );
|
|
|
|
if ( ! $job_post || ! $assessment_post ) {
|
|
wp_die( esc_html__( 'Could not load associated job or assessment details.', 'quiztech' ) );
|
|
}
|
|
|
|
$job_title = get_the_title( $job_post );
|
|
$assessment_title = get_the_title( $assessment_post );
|
|
// Consider fetching job description/content if needed: $job_content = apply_filters('the_content', $job_post->post_content);
|
|
|
|
// Determine if pre-screening should be displayed
|
|
$show_pre_screening = ! empty( $pre_screening_questions ) && is_array( $pre_screening_questions ) && $invitation_data->status === 'sent';
|
|
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html <?php language_attributes(); ?>>
|
|
<head>
|
|
<meta charset="<?php bloginfo( 'charset' ); ?>">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title><?php echo esc_html( $assessment_title ?: __( 'Assessment Invitation', 'quiztech' ) ); ?></title>
|
|
<?php // wp_head(); // Consider if theme/WP styles are needed or if it should be isolated ?>
|
|
<style>
|
|
/* Basic styling for isolation */
|
|
body { font-family: sans-serif; padding: 20px; background-color: #f9f9f9; }
|
|
.assessment-container { background-color: #fff; padding: 30px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); max-width: 800px; margin: 20px auto; }
|
|
h1, h2, h3 { color: #333; }
|
|
.error { color: red; font-weight: bold; }
|
|
.step-info { margin-bottom: 20px; padding: 10px; background-color: #eef; border-left: 3px solid #aab; }
|
|
.form-group { margin-bottom: 15px; }
|
|
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
|
|
.form-group textarea { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px; min-height: 80px; }
|
|
button { padding: 10px 20px; background-color: #0073aa; color: #fff; border: none; border-radius: 3px; cursor: pointer; font-size: 1em; }
|
|
button:hover { background-color: #005a87; }
|
|
button:disabled { background-color: #a0a5aa; cursor: not-allowed; }
|
|
#quiztech-begin-assessment { margin-top: 20px; }
|
|
.quiztech-timer { font-size: 1.2em; font-weight: bold; text-align: right; margin-bottom: 15px; padding: 5px; background-color: #f0f0f0; border-radius: 3px; }
|
|
.quiztech-question-container { border: 1px solid #eee; padding: 20px; margin-bottom: 20px; }
|
|
.quiztech-question-hidden { display: none; }
|
|
.quiztech-navigation { margin-top: 20px; text-align: right; }
|
|
.quiztech-navigation button { margin-left: 10px; }
|
|
#quiztech-completion-message { margin-top: 20px; padding: 15px; background-color: #dff0d8; border: 1px solid #d6e9c6; color: #3c763d; border-radius: 4px; }
|
|
/* Hide sections by default - JS will show them */
|
|
#quiztech-assessment-section { display: none; }
|
|
.form-messages { margin-top: 10px; padding: 10px; border-radius: 3px; }
|
|
.form-messages.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
|
|
.form-messages.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="assessment-container">
|
|
|
|
<!-- Landing Section -->
|
|
<div id="quiztech-landing-section">
|
|
<h1><?php esc_html_e( 'Assessment Invitation', 'quiztech' ); ?></h1>
|
|
|
|
<h2><?php echo esc_html( $job_title ); ?></h2>
|
|
<h3><?php printf( esc_html__( 'Assessment: %s', 'quiztech' ), esc_html( $assessment_title ) ); ?></h3>
|
|
|
|
<?php // Optional: Display Job Content/Description ?>
|
|
<?php /*
|
|
if ( ! empty( $job_content ) ) {
|
|
echo '<div>' . wp_kses_post( $job_content ) . '</div>';
|
|
}
|
|
*/ ?>
|
|
|
|
<?php if ( $show_pre_screening ) : ?>
|
|
<div id="quiztech-prescreening-section">
|
|
<div class="step-info">
|
|
<h4><?php esc_html_e( 'Pre-Screening Questions', 'quiztech' ); ?></h4>
|
|
<p><?php esc_html_e( 'Please answer the following questions before starting the assessment.', 'quiztech' ); ?></p>
|
|
</div>
|
|
|
|
<form id="quiztech-prescreening-form" method="post" action=""> <?php // Action handled by AJAX ?>
|
|
<?php // Nonce is checked via AJAX ?>
|
|
<input type="hidden" name="action" value="quiztech_submit_prescreening">
|
|
<div class="form-messages" style="display: none;"></div> <?php // Placeholder for messages ?>
|
|
|
|
<?php foreach ( $pre_screening_questions as $index => $question ) : ?>
|
|
<div class="form-group">
|
|
<label for="pre_screen_answer_<?php echo esc_attr( $index ); ?>">
|
|
<?php echo esc_html( $question ); ?>
|
|
</label>
|
|
<textarea
|
|
id="pre_screen_answer_<?php echo esc_attr( $index ); ?>"
|
|
name="pre_screen_answer[<?php echo esc_attr( $index ); ?>]"
|
|
required
|
|
></textarea>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
<?php // Submit button removed - handled by #quiztech-begin-assessment ?>
|
|
</form>
|
|
</div> <!-- #quiztech-prescreening-section -->
|
|
<?php endif; ?>
|
|
|
|
<button type="button" id="quiztech-begin-assessment"><?php esc_html_e( 'Begin Assessment', 'quiztech' ); ?></button>
|
|
|
|
</div> <!-- #quiztech-landing-section -->
|
|
|
|
<!-- Assessment Section (Initially Hidden) -->
|
|
<div id="quiztech-assessment-section">
|
|
<div class="step-info">
|
|
<h2><?php printf( esc_html__( 'Assessment: %s', 'quiztech' ), esc_html( $assessment_title ) ); ?></h2>
|
|
<?php // Optional: Add instructions here ?>
|
|
</div>
|
|
|
|
<div id="quiztech-timer" class="quiztech-timer">00:00</div> <?php // Timer placeholder ?>
|
|
|
|
<?php
|
|
$assessment_id = $invitation_data->assessment_id;
|
|
// Fetch question IDs associated with the assessment
|
|
$question_ids = get_post_meta( $assessment_id, '_quiztech_linked_question_ids', true );
|
|
|
|
if ( is_array( $question_ids ) && ! empty( $question_ids ) ) :
|
|
?>
|
|
<form id="quiztech-assessment-form" method="post" action=""> <?php // Action handled by AJAX ?>
|
|
<?php // Nonce is checked via AJAX ?>
|
|
<div class="form-messages" style="display: none;"></div> <?php // Placeholder for messages ?>
|
|
|
|
<div id="quiztech-questions-container">
|
|
<?php foreach ( $question_ids as $index => $question_id ) : ?>
|
|
<?php
|
|
$question_post = get_post( $question_id );
|
|
if ( ! $question_post || 'question' !== $question_post->post_type ) {
|
|
continue; // Skip if post not found or not a question
|
|
}
|
|
$question_title = get_the_title( $question_post );
|
|
$question_content = apply_filters('the_content', $question_post->post_content); // Get question content
|
|
$question_type = get_post_meta( $question_id, 'question_type', true );
|
|
$is_first_question = ( $index === 0 ); // Check if it's the first question
|
|
?>
|
|
<div class="quiztech-question-container <?php echo $is_first_question ? '' : 'quiztech-question-hidden'; ?>"
|
|
data-question-id="<?php echo esc_attr( $question_id ); ?>"
|
|
data-question-index="<?php echo esc_attr( $index ); ?>">
|
|
|
|
<h4><?php printf( esc_html__( 'Question %d of %d', 'quiztech' ), $index + 1, count( $question_ids ) ); ?></h4>
|
|
<div class="question-title"><strong><?php echo esc_html( $question_title ); ?></strong></div>
|
|
<?php if ( ! empty( $question_content ) ) : ?>
|
|
<div class="question-content">
|
|
<?php echo wp_kses_post( $question_content ); ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<div class="question-answer-area">
|
|
<?php // Render input based on question type ?>
|
|
<?php switch ( $question_type ) :
|
|
case 'text': ?>
|
|
<textarea name="assessment_answer[<?php echo esc_attr( $question_id ); ?>]" required></textarea>
|
|
<?php break; ?>
|
|
|
|
<?php case 'multiple-choice': ?>
|
|
<?php
|
|
$choices = get_post_meta( $question_id, 'question_choices', true );
|
|
if ( is_array( $choices ) && ! empty( $choices ) ) :
|
|
foreach ( $choices as $choice_index => $choice_text ) :
|
|
$choice_value = esc_attr( $choice_text ); // Use text as value for simplicity
|
|
$choice_id = 'choice_' . esc_attr( $question_id ) . '_' . esc_attr( $choice_index );
|
|
?>
|
|
<label for="<?php echo $choice_id; ?>">
|
|
<input type="radio"
|
|
id="<?php echo $choice_id; ?>"
|
|
name="assessment_answer[<?php echo esc_attr( $question_id ); ?>]"
|
|
value="<?php echo $choice_value; ?>"
|
|
required>
|
|
<?php echo esc_html( $choice_text ); ?>
|
|
</label><br>
|
|
<?php endforeach; ?>
|
|
<?php else : ?>
|
|
<p class="error"><?php esc_html_e( 'Error: Choices not found for this question.', 'quiztech' ); ?></p>
|
|
<?php endif; ?>
|
|
<?php break; ?>
|
|
|
|
<?php case 'true-false': ?>
|
|
<label><input type="radio" name="assessment_answer[<?php echo esc_attr( $question_id ); ?>]" value="true" required> True</label><br>
|
|
<label><input type="radio" name="assessment_answer[<?php echo esc_attr( $question_id ); ?>]" value="false"> False</label>
|
|
<?php break; ?>
|
|
|
|
<?php default: ?>
|
|
<p class="error"><?php esc_html_e( 'Unsupported question type.', 'quiztech' ); ?></p>
|
|
<?php endswitch; ?>
|
|
</div> <?php // .question-answer-area ?>
|
|
</div> <?php // .quiztech-question-container ?>
|
|
<?php endforeach; ?>
|
|
</div> <!-- #quiztech-questions-container -->
|
|
|
|
<div class="quiztech-navigation">
|
|
<button type="button" id="quiztech-next-question"><?php esc_html_e( 'Next Question', 'quiztech' ); ?></button>
|
|
<button type="button" id="quiztech-submit-assessment" style="display: none;"><?php esc_html_e( 'Submit Assessment', 'quiztech' ); ?></button>
|
|
</div>
|
|
|
|
</form>
|
|
|
|
<div id="quiztech-completion-message" style="display: none;">
|
|
<?php // Completion message will be inserted here by JS ?>
|
|
</div>
|
|
|
|
<?php
|
|
else :
|
|
echo '<p class="error">' . esc_html__( 'Could not load questions for this assessment.', 'quiztech' ) . '</p>';
|
|
// Debugging info:
|
|
// echo '<pre>Question IDs Data: ' . esc_html( print_r( $question_ids, true ) ) . '</pre>';
|
|
endif;
|
|
?>
|
|
</div> <!-- #quiztech-assessment-section -->
|
|
|
|
</div>
|
|
<?php wp_footer(); // Consider if needed ?>
|
|
</body>
|
|
</html>
|