7.3. Survey - Модули

import React, { useState } from 'react';
import Header from './Header';
import QuestionInterface from './QuestionInterface';
import NavigationControls from './NavigationControls';
import './SurveyCard.css';

interface SurveyCardProps {
  title: string;
  currentQuestion: any;
  totalQuestions: number;
  currentQuestionIndex: number;
  onNext: () => void;
  onPrev: () => void;
  onAnswerChange: (questionId: string, value: any) => void;
  answers: Record<string, any>;
  companyName?: string;
}

const SurveyCard: React.FC<SurveyCardProps> = ({
  title,
  currentQuestion,
  totalQuestions,
  currentQuestionIndex,
  onNext,
  onPrev,
  onAnswerChange,
  answers,
  companyName
}) => {
  // Проверяем, есть ли ответ на текущий вопрос
  const hasAnswer = currentQuestion && answers[currentQuestion.questionId] !== undefined;
  
  return (
    

      

      
      {currentQuestion && (
         onAnswerChange(currentQuestion.questionId, value)}
          value={answers[currentQuestion.questionId]}
        />
      )}
      
       0}
        isLastQuestion={currentQuestionIndex === totalQuestions - 1}
      />
    
  );
};

export default SurveyCard;
                    

import React from 'react';
import Radio5pt from './answer-interfaces/radio-5pt/Radio5pt';
import Stars5pt from './answer-interfaces/stars-5pt/Stars5pt';
import Scale11pt from './answer-interfaces/scale-11pt/Scale11pt';
import Slider11pt from './answer-interfaces/slider-11pt/Slider11pt';
import Text from './answer-interfaces/text/Text';
import Pictures4pt from './answer-interfaces/pictures-4pt/Pictures4pt';
import './QuestionInterface.css';

interface QuestionInterfaceProps {
  question: any;
  onChange: (value: any) => void;
  value: any;
}

const QuestionInterface: React.FC<QuestionInterfaceProps> = ({
  question,
  onChange,
  value
}) => {
  // Выбор компонента интерфейса ответа в зависимости от типа вопроса
  const renderAnswerInterface = () => {
    switch (question.type) {
      case 'radio-5pt':
        return (
          
        );
      case 'stars-5pt':
        return (
          
        );
      case 'scale-11pt':
        return (
          
        );
      case 'slider-11pt':
        return (
          
        );
      case 'text':
        return (
          
        );
      case 'pictures-4pt':
        return (
          
        );
      default:
        return null;
    }
  };
  
  return (
    

      

        {question.question}
      
      
      {question.hint && (
        

          {question.hint}
        
      )}
      
      

        {renderAnswerInterface()}
      
    
  );
};

export default QuestionInterface;
                    

import React from 'react';
import './NavigationControls.css';

interface NavigationControlsProps {
  onNext: () => void;
  onPrev: () => void;
  canGoNext: boolean;
  canGoPrev: boolean;
  isLastQuestion: boolean;
}

const NavigationControls: React.FC<NavigationControlsProps> = ({
  onNext,
  onPrev,
  canGoNext,
  canGoPrev,
  isLastQuestion
}) => {
  return (
    

      
        Назад
      
      
      
        {isLastQuestion ? 'Завершить' : 'Далее'}
      
    
  );
};

export default NavigationControls;
                    

import React from 'react';
import './Stars5pt.css';

interface Stars5ptProps {
  value: number | null;
  onChange: (value: number) => void;
}

const Stars5pt: React.FC<Stars5ptProps> = ({ value, onChange }) => {
  const handleClick = (rating: number) => {
    onChange(rating);
  };
  
  return (
    

      {[1, 2, 3, 4, 5].map((rating) => (
        
 handleClick(rating)}
        >
          ★
        
      ))}
    
  );
};

export default Stars5pt;
                    

import React from 'react';
import Logo from './Logo';
import './SurveyCompleted.css';

interface SurveyCompletedProps {
  companyName?: string;
}

const SurveyCompleted: React.FC<SurveyCompletedProps> = ({ companyName }) => {
  return (
    

      
      
      

        
Опрос завершен
        
Благодарим вас за участие в опросе!{companyName && 
          ` Компания ${companyName} ценит ваше мнение и использует его для улучшения рабочей среды.`}
      
    
  );
};

export default SurveyCompleted;
                    

import React from 'react';
import Logo from './Logo';
import './PreparationSteps.css';

interface PreparationStepsProps {
  onStart: () => void;
  companyName?: string;
}

const PreparationSteps: React.FC<PreparationStepsProps> = ({ onStart, companyName }) => {
  return (
    

      
      
      

        
Подготовка к опросу
        
        

          

            
1
            

              
Найдите тихое место
              
Убедитесь, что вас ничто не отвлекает во время прохождения опроса.
            
          
          
          

            
2
            

              
Подготовьте нужную информацию
              
Возможно, вам потребуется вспомнить некоторые события или факты.
            
          
          
          

            
3
            

              
Будьте честны
              
Ваши ответы анонимны и помогут {companyName || 'компании'} стать лучше.
            
          
        
        
        
          Начать опрос
        
      
    
  );
};

export default PreparationSteps;
                    

import React from 'react';
import './DifficultyModal.css';

interface DifficultyModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSelectDifficulty: (difficulty: string) => void;
}

const DifficultyModal: React.FC<DifficultyModalProps> = ({
  isOpen,
  onClose,
  onSelectDifficulty
}) => {
  if (!isOpen) return null;
  
  return (
    

      

        
Выберите уровень сложности
        
        

           onSelectDifficulty('easy')}
          >
            
Легкий
            
Базовые вопросы, подходит для быстрого прохождения
          
          
           onSelectDifficulty('medium')}
          >
            
Средний
            
Стандартный набор вопросов с умеренной детализацией
          
          
           onSelectDifficulty('hard')}
          >
            
Сложный
            
Расширенный набор вопросов с глубоким анализом
          
        
        
        
          Отмена
        
      
    
  );
};

export default DifficultyModal;