创建一个在线答题PK项目的JavaScript代码需要涉及前端交互、数据处理以及可能的服务器端逻辑。以下是一个简化的例子，使用WXML， WXSS和JavaScript来构建前端部分，并假设我们有一个简单的题库作为JSON对象：

对不起，你提到的WXML和WXSS是微信小程序特有的语法，而你之前的需求是基于JavaScript创建一个通用的在线答题PK项目。对于微信小程序，确实会有所不同，因为它们有自己的生命周期管理、组件化和网络请求等API。

但是，如果你想将这个问题转换为微信小程序环境，可以这样做：

首先，在WXML文件中定义界面结构：

<!-- wxml -->
<view class="container">
  <view class="question-container">
    <text id="questionText" wx:text="{{question}}"></text>
    <view class="answers">
      <!-- 通过循环遍历答案数组 -->
      <block wx:for="{{answers}}" wx:key="*this">
        <radio-button checked="{{selectedAnswer === index}}" bindtap="handleAnswerTap">{{item}}</radio-button>
      </block>
    </view>
  </view>
  <button bindtap="nextQuestion">下一题</button>
</view>

然后在WXSS中编写样式：

/* wxss */
.container {
  display: flex;
}
.question-container {
  margin-bottom: 10rpx;
}

接着，在JS文件中编写逻辑，包括数据处理和用户交互：

// js
Page({
  data: {
    questions: [], // 题库数据
    currentQuestion: 0,
    selectedAnswer: -1,
    answers: []
  },
  onLoad() {
    // 加载题库
    this.loadQuestions();
  },
  loadQuestions() {
    // 从远程或本地获取题库数据并填充data
  },
  handleAnswerTap(e) {
    this.selectedAnswer = e.currentTarget.dataset.index;
    if (this.isCorrect()) {
      this.nextQuestion();
    } else {
      Toast.show('回答错误');
    }
  },
  isCorrect() {
    // 检查用户答案是否正确
  },
  nextQuestion() {
    this.currentQuestion++;
    if (this.currentQuestion < this.questions.length) {
      this.setData({
        question: this.questions[this.currentQuestion].question,
        answers: this.questions[this.currentQuestion].answers,
        selectedAnswer: -1 // 清空选择
      });
    } else {
      Toast.show('比赛结束');
    }
  }
})

请注意，这里仅提供了一个非常基础的例子，实际应用可能需要更复杂的逻辑，例如用户注册、匹配对手、计分系统等。同时，微信小程序的数据交互通常使用云函数或网络请求API，而不是直接操作服务器端数据。