Блог

Существует очень мало примеров реализации SCORM, поэтому я немного растерян. Мне нужно получить оценку студента на основе 3 вопросов. Я действительно не понимаю, что я делаю. Я знаю, что мне, вероятно, нужна такая функция, как calculateScore(). Хотя СКОРМ сбивает меня с толку до чертиков. Я использую SCORMCLOUD для тестирования, но мне приходится повторно загружать сборку каждый раз, когда я хочу что-то протестировать..

APP.js

 function App() {
  Scorm.init();

  const [learnerName, setLearnerName] = useState(`${Scorm.getLearnerName()}`);
  const [assessment, setAssessment] = useState([]);

  const finish = () => {
    Scorm.finish();
  };

  const updateAssesment = (correct, response) => {
    setAssessment(assessment.concat([correct]));
    Scorm.submitMCQ(correct, response);
  };
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Learner name={learnerName} />
      </header>
      <main>
        <Mcq result={updateAssesment.bind()} question="What is 10 * 10?" correctAnswer={0} answers={["100", "20"]} />
        <Mcq
          result={updateAssesment.bind()}
          question="What is the capital of Spain?"
          correctAnswer={2}
          answers={["Barcelona", "Lisbon", "Madrid"]}
        />
        <Mcq
          result={updateAssesment.bind()}
          question="Which US President's office commissioned the creation of SCORM?"
          correctAnswer={3}
          answers={["Donald Trump", "Barack Obama", "Ronald Reagan", "Bill Clinton"]}
        />
        <CompleteButton completeActivity={finish.bind()} />
      </main>
    </div>
  );
}
export default App;
 

SCORM.js

 import { SCORM } from "pipwerks-scorm-api-wrapper";

let Scorm = {
  init() {
    SCORM.init();
  },

  getLearnerName() {
    return SCORM.get("cmi.core.student_name");
  },

  submitMCQ(correct, response) {
    let nextIndex = SCORM.get("cmi.interactions._count", true);
    SCORM.set("cmi.interactions."   nextIndex   ".id", "round_"   nextIndex);
    SCORM.set("cmi.interactions."   nextIndex   ".type", "choice");
    SCORM.set("cmi.interactions."   nextIndex   ".student_response", response);
    SCORM.set("cmi.interactions."   nextIndex   ".result", correct);
  },

  calculateScore() {
    //something here??
    SCORM.set("cmi.core.score.raw", "0");
    SCORM.set("cmi.core.score.max", "100");
    SCORM.set("cmi.core.score.min", "0");
  },

  finish() {
    alert("you have finished!");
    SCORM.set("cmi.core.lesson_status", "completed");
    SCORM.save();
    SCORM.quit();
  },
};

export default Scorm;
 

Компонент MCQ

 export default function Mcq(props) {
  const [selectedOption, setSelectedOption] = useState(0);
  const [answered, setAnswered] = useState(false);

  const handleOptionChange = (changeEvent) => {
    setSelectedOption(Number(changeEvent.target.value));
  };
  const renderAnswers = () => {
    return props.answers.map(function (answer, index) {
      return (
        <div className="answer" key={index}>
          <input type="radio" value={index} checked={selectedOption === index} onChange={handleOptionChange} />
          <label>{answer}</label>
        </div>
      );
    });
  };
  const handleFormSubmit = (formSubmitEvent) => {
    formSubmitEvent.preventDefault();
    setAnswered(true);
    props.result(selectedOption === props.correctAnswer, props.answers[selectedOption]);
  };
  const currentState = () => {
    if (!answered) {
      return (
        <form onSubmit={handleFormSubmit.bind(this)}>
          {renderAnswers()}
          <button className="btn btn-default" type="submit">
            Submit
          </button>
        </form>
      );
    } else {
      return <div>{checkCorrectAnswer()}</div>;
    }
  };
  const checkCorrectAnswer = () => {
    if (selectedOption === props.correctAnswer) {
      return `yes, ${props.answers[props.correctAnswer]} is the correct answer.`;
    } else {
      return `You answered ${props.answers[selectedOption]}. Sorry, but the correct answer is ${
        props.answers[props.correctAnswer]
      }.`;
    }
  };

  return (
    <div className="Mcq">
      <p>{props.question}</p>
      {currentState()}
    </div>
  );
}
 

Ваш вопрос немного сбивает с толку. SCORM-это API, связывающий две вещи воедино:

• учебный контент, обычно в виде одного или нескольких так называемых SCO (т. е. HTML-файлов с активами, подключенными к API SCORM JS)
• LMS, обслуживающая учебный контент и предоставляющая экземпляр SCORM JS API

Похоже, вы пытаетесь создать учебный контент, хотя вы предоставляете способ изменить имя учащегося, которое является данными только для чтения, предоставляемыми API JS.

Если это то, что вы пытаетесь сделать, то не SCORM должен сообщить вам результат, а вы сами. Основываясь на вашем коде, я предполагаю, что вы хотите, чтобы каждый вопрос стоил нескольких очков (или, по крайней мере, одного), если на него дан правильный ответ, и оценка должна основываться на этом и общем количестве вопросов.

Поскольку вы уже храните все ответы cmi.interactions , вы можете сначала попытаться получить количество взаимодействий (т. Е. Ответов). Это показывает вам общее количество ответов и, следовательно, максимальное количество баллов, или cmi.core.score.max .

Поскольку минимально возможный балл равен нулю, если вы проведете простой подсчет вместо чего-то более сложного, например, отрицательных баллов за неправильный выбор, cmi.core.score.min тогда будет 0 .

Это cmi.core.score.raw будет общее количество баллов, то есть количество правильных ответов. Вы могли бы получить это, повторяя значения cmi.interactions.n.result , которые вы установили ранее (с n индексом между нулем и cmi.interactions._count и считая только те, где result есть "correct" ).

Однако обратите внимание, что submitMCQ должно быть установлено cmi.interactions.n.result значение "correct" или "incorrect" не true или false . Соответствующая LMS в противном случае отклонит значение как недопустимое (что не вызывает исключения, но вместо этого устанавливает флаг ошибки, который вы должны явно проверить, потому что SCORM выглядит странно).

Я разработал API контента SCOBot, чтобы помочь вам в этом, если вы хотите попробовать. По крайней мере, если вам надоест пытаться просмотреть все отдельные звонки.

Он добавляет дополнительную оболочку для управления общим количеством взаимодействий / подсчетом очков, поэтому вы не записываете все дополнительные функции управления.

https://github.com/cybercussion/SCOBot/blob/e67239c36fdc104be9d29b0810815f9b3175c831/QUnit-Tests/js/scorm/SCOBot.js#L841

И пример группировки, чтобы вы могли определить ее один раз, и она позаботится об этом — https://github.com/cybercussion/SCOBot/wiki/SCORM-SCOBot-Documentation#set-interaction

Существует множество настроек конфигурации для включения/выключения части проекта » бот » и т. Д…

Тесты QUnit также были написаны в каталоге тестов, которые показывают несколько взаимодействий/целей и другие выполненные вызовы. https://github.com/cybercussion/SCOBot/blob/e67239c36fdc104be9d29b0810815f9b3175c831/QUnit-Tests/js/test/scobot-prod.js#L252

Я также разработал его для работы независимо от версии 1.2 / 2004, поэтому вы используете один набор пространств имен. И не нужно запоминать все различия в версиях.

Этот проект с открытым исходным кодом, бесплатный в использовании/тестировании. Последняя версия вырвала его из jQuery, поэтому у него есть своя собственная система событий и утилиты. Если вы используете что-то вроде Angular, вам, возможно, придется работать с NgZone, реагируйте, я думаю, вы можете быть в порядке. Если у вас возникнут проблемы, дайте мне знать.